vue2+vuex+vue-router 快速入门（五） vuex 介绍

vuex

　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 
　　在《快速入门（一）》中我们提到过，我们可以把 Vuex 简单的抽象为，一个全局对象（store），里面保存了所有组件公有的状态（state）。只是这个全局对象不能直接读写。需要通过特殊的读写渠道。

在 vuex 中写渠道需要用户自定义，分为 Mutations 同步设置，和 Actions 异步设置

Vuex 声明及注入

Vue.use(Vuex);

export default  new  Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})

根组件中调用

import store form './store'

new Vue({
  el: '#app',
  router,
  store, 
  template: '<App/>',
  components: { App }
})

以上我们完成了，Vuex 的申明及注入 Vue 中。现在我们先来看看在申明 Vuex.Store 中，各项所代表的意思。

State

　　用以保存仓库 Store 中根状态。格式如下：

export default {
    token: null, // 用户本地登录凭证,
    newCredit:false,
    loading: {
        show: false,
        msg: ''
    },
    dialogMsg: {
        msgShow: false,
        msg: '',
        timeout: null
    }
}

你没有看错，就是一个简单的对象。这些就是我们整个项目需要共享的状态(state)。

Mutations

　　如果我们需要修改 state 中的状态，就需要借助 Mutations。Mutations 为我们提供了同步修改 state 的方法。

import {
    SHOW_LOADING,
    HIDE_LOADING,
    SHOW_NEW_CREDIT,
    HIDE_NEW_CREDIT,
} from './mutationTypes'


export default {
    [SHOW_LOADING](state,msg){
        state.loading = {
            show:true,
            msg
        }
    },
    [HIDE_LOADING](state){
        state.loading = Object.assign(state.loading, {show:false});
    },
    [SHOW_NEW_CREDIT](state){
        state.newCredit = true;
    },
    [HIDE_NEW_CREDIT](state){
        state.newCredit = false;
    }
}

从上面的实例，我们发现，Mutations 由一个个函数组成，函数的第一个参数为 state 。指向上面我们申明的 State 对象。第二个参数为新值。函数内执行一个同步的赋值过程。然后函数名有点怪，是为了方便管理 Mutations 函数，我们让函数名由一个独立的文件提供(这个都是小问题)。

Actions

　　Actions 和 Mutations 结构一样，都提供一些函数，不一样的是，Actions 主要为异步修改 State 而生。

import {
  SET_DIALOG_MSG,
  SET_DIALOG_MSG_SHOW,
  SET_DIALOG_MSG_TIMEOUT
} from './mutationTypes'

export default {
  setDialogMsg({commit, state},msg){
    commit(SET_DIALOG_MSG,msg);
    commit(SET_DIALOG_MSG_SHOW,true);

    if(state.dialogMsg.timeout){
      clearTimeout(state.dialogMsg.timeout);
    }

    commit(SET_DIALOG_MSG_TIMEOUT,setTimeout(() =>{
      // this.msg = '';
      commit(SET_DIALOG_MSG_SHOW,false);
    },1500))
  }
}

Actions 函数也接受两个参数，第二个参数与 Mutations 函数一样，都是 state 新值。第一个参数是一个 content 对象，其中可以包含 commit 函数和 state 对象。前者是拿来帮助我们触发 Mutations 的，后则是仅供我们读取 state 中的数据

我们发现最后修改 State 状态的其实还是 Mutations 函数，Actions 只是异步去调用而已。

Getters

　　Getters 是 State 的补充，当我们需要从 State 中派生出某些值时，而且多个组件同时都需要使用此派生时，我们可以把这个派生提取到 Getters 中。

export default{
doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

Modules

　　目前我们介绍的共享状态都是直接保存在根状态树中的（state），这样务必会导致 state 变得很臃肿 。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

Store 的使用

　　上面我们介绍了，申明 Store 时 State、Mutations、Actions、Getters 的作用。现在我们来看看，在 Vue 项目中，如何引用这些状态或方法。

mapState 辅助函数

　　帮助我们把全局共享状态，引入到局部组件中。

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: {
    ...mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
    return state.count + this.localCount
    }

    // 获取 loan 模块中的状态。
    loanMoney:state => state.loan.money
    })
  }
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: {
    ...mapState([
        // 映射 this.count 为 store.state.count
        'count'
    ])
}

mapGetters 辅助函数。

　　使用方法同 mapState。

mapMutations 辅助函数

　　你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
    })
  }
}

注意，对于 mutations 是不区分根 state 中的 mutations 还是 module 中的 mutations 都是一样的引入方式。

mapActions 辅助函数

　　使用方法同 mapMutations

参考文档：

vue教程 
vue-loader教程 
vuex教程