VUE全家桶之vuex的使用

前言

在vue项目中，若是咱们涉及到兄弟组件间的传值（及多个组件共享一个状态）。遇到这种状况使用vuex来解决是目前比较流行的解决方案。虽然在vuex官方文档中详细介绍了vuex的使用方法，可是文档中的内容太过细节，初次阅读不易抓住重点。本篇文章根据自身使用vuex的经验来精简的说明下vuex的使用，但愿内可以给初次使用vuex的小伙伴提供些帮助，也但愿熟悉这块的道友如发现文章不到之处给出指正。

注：本文介绍两种使用vuex的方式，一种适用于简单而且共享状态较少的状况，一种适用于复杂而且状态较多的状况。

VUEX 基本使用方式

1. 新建个store.js文件，main.js中引入而且添加到vue中。（如图1）
2. 定义状态和改变状态的mutations

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    actions:{
        setCount: ({ commit }, count) => {
            commit('SET_COUNT', count)
          },
    }
  })

 export default store
复制代码

3. 获取状态值/改变状态值/异步改变状态

let count = this.$store.state.count//获取状态的值
    this.$store.commit('increment')//mutations改变状态
    this.$store.dispatch('setCount')//actions改变状态(异步执行的)
复制代码

VUEX module使用方式

因为使用单一状态树，应用的全部状态会集中到一个比较大的对象。当应用变得很是复杂时，store 对象就有可能变得至关臃肿为了解决以上问题，Vuex 容许咱们将 store 分割成模块 （module）。每一个模块拥有本身的 state、mutation、action、 甚至是嵌套 子模块——从上至下进行一样方式的分割（引用官方文档的一句话）：

1. 根据所需modules新建文件夹和文件

左侧红框内的目录结构， store/actions、store/mutations为根actions和mutations定义的文件 store/moudles/* 每一个module定义的文件

2. 定义根state以及modules的相关属性

import Vue from 'vue'
import Vuex from 'vuex'

import app from './modules/app'
import user from './modules/user'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    user
  },
  //根状态 
  state: {
    menus:[],
  },
  mutations:mutations,
  actions: actions,
})

复制代码

/modules/user.js中的定义。（每一个module中均可以定义本身的state mutations actions getters）

const user = {
    state:{
        userInfo:{}
    },
    mutations:{
        SET_USER_INFO: (state, userInfo) => {
            state.userInfo = []
            state.userInfo = userInfo
          },
    },
    actions:{},
    getters:{},
}
export default user
复制代码

3. 获取状态值/改变状态值/异步改变状态 根目录的state值获取改变以及异步state改变同VUEX 基本使用方式中的使用方式。 module中的state值(store.state.moduleName)获取改变以及异步state改变:

this.$store.state.user.userInfo
this.$store.commit("SET_USER_INFO")
复制代码

当咱们定义两个模块中有相同的mutation属性是此时commit会同时改变这两个模块。此时咱们应该如何处理呢？

1. mutation属性命名是加上模块名前缀如：SET_USER_*(多人开发时必须强制规范)，此种方法虽然简单，但若是团队中出现不按规范来的人时就会出现很大问题。
2. vuex给出了定义命名空间的解决方法：

const user = {
    namespaced: true,//成为带命名空间的模块
    state:{
        userInfo:{}
    },
    mutations:{
        SET_INFO: (state, userInfo) => {
            state.userInfo = []
            state.userInfo = userInfo
          },
    },
    actions:{},
    getters:{},
}
export default user
复制代码

若是模块namespaced被设置为true name 当模块被注册后，它的全部 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。意思就是此时全部的属性名都会自动改变成 "ModuleName/*"及模块名/属性名 这两种方式，咱们项目中使用的是第二种由于这个项目的小伙伴是首次合做，人为控制变量名容易出现问题。

其余

VUEX中为了方便咱们开发还提供了辅助函数mapState mapGetters mapActions mapMutations ,若是有兴趣的小伙伴能够去官方文档学习下。另外若是有对vuex源码感兴趣的小伙伴能够去参考下个人另外一篇文章vue全家桶之vuex核心原理解析。