脚本宝典收集整理的这篇文章主要介绍了

vue2.0一起在懵逼的海洋里越陷越深(四)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前言

承接上文vue2.0一起在懵逼的海洋里越陷越深(三)
前面一篇讲了vue-router的router-link,
有读者说希望能先看到vuex的文章
其实vuex在我的vue2.0的demo里已经在使用了
想想确实应该先来点vuex的了,因为有些有关的状态管理急需vuex的加入
好,那么这次就先上vuex吧!

正文

OK!先介绍下vuex
vuex是vuejs的状态管理方案
因为vuex有些复杂,一般应用在较复杂的状态环境下,如果是比较简单的应用就不需要安装vuex了

vuex单向数据流

vuex单向数据流

如上图所示是vuex单向数据流的流程

我知道,如果是第一次接触这玩意,到这就懵逼了,就像我第一次看文档一样
clipboard.png

下面解释下State
前面说了vuex是vuejs的状态管理方案,这里的状态就是图中的state
在平时写写前端的过程中,都会涉及到状态的问题,
比如你看到了一篇文章写的不错,就想要收藏,
然后又对作者有些兴趣,于是又加了关注,当然这些最后都是需要前端来表达出来
这里面就涉及了两个状态就是收藏与关注
这里的收藏与关注我们可以将其用一个变量来表示,当然如这两种只存在两个相对状态的用布尔值(bool)来表示就可以了

然后是view
view就是视图,也就是前端所写的页面,前面的state就可以在view里面得到体现,即是你看到的是否关注了作者

而后是Actions
ActionsView用来改变State的方法,通过改变State从而改变View的显示

这么说有些抽象,打个比方
假设学生小明生病了
小明要向班主任请假(小明就是View,小明想改变自己的显示状态,从上学状态变成请假状态)
于是小明口头向班主任请假(请假就是Actions,小明通过请假这一个方法达到请假的目的)
班主任批准,小明请假成功(班主任就是State的提供者,小明通过请假方法使班主任改变小明的State状态)
着也就解释了为什么要有这个流程,有了这个流程就可以统一管理各个view的各个状态

vuex多个组件共享状态

先贴个流程图,懵逼是没啥关系的
vuex多个组件共享状态

可以看到这一张图比前面一张复杂了许多,其实里面的实线框就是上图的升级版

情况是这样,原来小明学校里这段时间许多同学得了流感,于是同学们一窝蜂的要求请假,
学校里因为人太多,又没有一个记录,人数清点不过来了,于是班主任要求请假必须提交请假条

好的,来解释下上图内的实线部分,之前的View在这里改名成了Vue Components,代表了多个组件(这里即是指多个同学)
包括小明在内的多个同学Vue Components都得了流感,一起想要请假Actions(他们即将共享一个请假状态),小明代表多个同学写了一张请假条交给班主任(State提供者)签字同意(签字同意这个动作就是Mutations,触发了State的改变),班主任同意后统一给他们改变了State(请假成功)

这里的多了一个同步与异步的区别,其中Mutations只受理同步处理,而Actions就是执行异步操作的函数,作为代价,Actions不再能直接触发改变State状态,而是需通过Mutations来触发State的改变

情况是这样,因为不只是一个班的学生得了流感,请假的人比较多,学校Backend API需要做一个统计,于是请假需要得到学校专门的请假条的并通过学校签字才能生效,这里就有了虚线部分。
请假Actions改变State的方法不再是仅仅班主任签字就可以了,而是需要通过学校这个前提,于是Actions就变成了一个异步请求,需要得到学校Backend API的专门的请假条和签字同意后,才能向班主任提交改变State的申请

这里想要表达的意思就是,Vue Components改变自身状态需要通过Actions(有需要的话要向后端接口Backend API发送请求)来操作Mutations改变State从而改变自身状态。
至于图中没有说到的Devtools是一个开发者工具,是一个便于查看和管理vue应用以及vuex状态的浏览器插件。
你可以在里面看到你vue对象和vuex每一次的commit,commit后面会说到。还有你当前的应用状态
devtools

附上一个devtools库地址

架构vuex

项目结构:

├── main.js
├── App.vue
├── components
│   ├── Home.vue
│   └── ...
└── store
    ├── index.js          # 组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    ├── types.js          # mutation命名空间
    └── modules
        ├── demo.js       # demo模块
        └── status.js     # 全局应用状态模块

结构可以根据个人需要进行调整

下面开始构建store/index.js
当然在这之前,如果没有安装vuex的需要先安装

npm i vuex -S

由于vuex的内容太多,这里先说基础用法
首先为store/index.js编写内容

import Vue from 'vue'
// 导入vue
import Vuex from 'vuex'
// 导入vuex

import status from './modules/status'
// 导入status模块(这是我管理全局应用状态的模块)
import demo from './modules/demo'
// 导入demo模块(这个的部分演示可以在http://vue2.leenty.com/demo/vuex_state/里看到)

Vue.use(Vuex)
// 告诉vue将要使用vuex

const debug = process.env.NODE_ENV !== 'production'
// env里去获取当前的环境是否需要开启严格模式
// 在发布环境开启严格模式会造成性能上不必要的损失

export default new Vuex.Store({
// 默认导出vuex模块
  modules: {
  // 导入模块
    status,
    demo
  },
  strict: debug
  // 是否开启严格模式
})

构建state模块
这里以demo.js为例

import * as types from '../types'
// 导入mutations的命名空间

const state = {
// 定义state
  demoFollow: false,
  // 这里模拟的是关注的状态,布尔值表示是否关注
  demoFollowPending: false
  // 是否在请求中(actions是否在执行异步操作)
}

const getters = {
// 定义getters, getters是对state的扩展,可以以state衍生出其他状态
  demoFollowStatus: state => state.demoFollow ? '已关注' : '未关注'
  // demoFollowStatus是demoFollow的衍生量,将原来的布尔值映射为'已关注' : '未关注'
}

const mutations = {
// 只有mutations才能操作改变state,mutations是同步执行的
// 所以有关异步的操作请放在actions里执行
  [types.DEMO__VUEX_FOLLOW] (state, status = NaN) {
  // 使用预定义好的名字来写mutations方法
    state.demoFollow = isNaN(status) ? !state.demoFollow : status
  },
  [types.DEMO__VUEX_FOLLOW_PENDING] (state, status = NaN) {
  // 这里对status传值做了审查,如没有传,则对要改变的布尔值进行取反操作
    state.demoFollowPending = isNaN(status) ? !state.demoFollowPending : status
  }
}

const actions = {
// actions是可以执行异步操作的,操作完毕后触发mutations里的方法去改变state的状态
  demoFollowAjax ({commit}, status) {
    commit(types.DEMO__VUEX_FOLLOW_PENDING)
    // 在异步操作前通过mutations告诉应用,现在正在进行异步操作
    setTimeout(() => {
      // 利用延时函数模拟异步的ajax操作
      commit(types.DEMO__VUEX_FOLLOW_PENDING)
      // commit 是在actions里用来触发mutations的方法
      // 告诉应用,异步操作结束
      commit(types.DEMO__VUEX_FOLLOW, status)
      // 为关注按钮赋予新的状态
    }, 2000)
  }
}

export default {
// 导出整个demo模块
  state,
  getters,
  actions,
  mutations
}

这里解释下mutations里的方法的奇怪写法,我知道如果对es6于法了解不多这里是会懵逼的

const mutations = {
  [types.DEMO__VUEX_FOLLOW] (state, status = NaN) {
    state.demoFollow = isNaN(status) ? !state.demoFollow : status
  }
}

这是对象内方法的简化写法,其中types.DEMO__VUEX_FOLLOW是在types.js里预定义的,内容如下

export const DEMO__VUEX_FOLLOW = 'DEMO__VUEX_FOLLOW'
export const DEMO__VUEX_FOLLOW_PENDING = 'DEMO__VUEX_FOLLOW_PENDING'
// 其实就是字符串集合,最后用 import * as types from '../types' 方法导入vuex模块里
// 就变成了一个types对象

上例中全部展开是这样的

const mutations = {
  [types.DEMO__VUEX_FOLLOW]: (state, status = NaN) => {
  // [types.DEMO__VUEX_FOLLOW]是提取types.DEMO__VUEX_FOLLOW的值的一种方式
  // 在这里[types.DEMO__VUEX_FOLLOW]提取出来就是types.js里预定义的'DEMO__VUEX_FOLLOW'
    if (isNaN(status){
      state.demoFollow = !state.demoFollow
    } else {
      state.demoFollow = status
    }
  }
}

好,到此为止,vuex就已经建立好了,下面就说如何使用了

应用状态的使用与改变

vuex提供了4个辅助函数

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

是分别用来获取State, Getters, Actions, Mutations的map方法
在vue Components里面你可以以这样的方式来导入需要使用的方法

这4个方法拥有统一的参数格式以及一个统一的返回格式
可以传入一个数组

mapGetters(['demoFollowStatus'])
// 此方法导出的是一个Getters对象
mapGetters({
  demoFollow: 'demoFollowStatus'
})
// 可以通过传入对象的形式来改变得到的getters方法名

同理,不同的map方法会导出各自的方法
其中mapState, mapGetters将会导出适用于computed的方法
mapMutations, mapActions将会导出适用于methods的方法

这里以一个demo组件为例DemoVuexState.vue

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
  // vue的计算属性,计算属性内方法的私有变量变动会触发这个属性的重新计算
    ...mapState({
      mapStateFollow: ({demo}) => demo.demoFollow,
      mapStateFollowPending: ({demo}) => demo.demoFollowPending
    }),
    // mapState()直接读取State里的状态内容
    ...mapGetters(['demoFollowStatus'])
    // mapGetters()通过getters转化state从而得到你想要的内容
  },
  methods: {
  // vue的方法,可以是一个事件的方法,也可以是一个vuex的方法,也可以是一个普通函数
    ...mapMutations(['DEMO__VUEX_FOLLOW']),
    // 同步的改变状态
    ...mapActions(['demoFollowAjax'])
    // 异步的改变状态
  }
}

这段代码是一个demo里的片段,效果大家可以看这个呆萌,如果开心了欢迎更随或者github库里加个星,如果有问题可以在下方评论里讨论讨论?

总结

以上是脚本宝典为你收集整理的

vue2.0一起在懵逼的海洋里越陷越深(四)

全部内容,希望文章能够帮你解决

vue2.0一起在懵逼的海洋里越陷越深(四)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过