vue vuex模块化

简单介绍

state

//store.js
//存放数据
  state: {
    index:'index in root store'
  },
//组件内获取方式
  computed: {
    // 可以结合computed 使用
    index(){
      return this.$store.state.index
    }
  }

mutations

mutations两个参数 第一个是默认参数state 第二个是传参payload,这里有一个异步同步的概念，一般我们在actions里面执行异步操作，在mutations里面(执行同步)操作state的状态改变（即修改state里面的数据）

//store.js
 SET_COUNTA_ADD(state, payload) {
   state.countA += payload;
 },
 //触发方式
store.commit('SET_COUNTA_ADD',5)

actions

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
context.commit 提交一个 mutation，或者通过 context.state 和 context.getters来获取 state 和 getters。

//store.js
//可以使用用解构方式
 reduceCountAsync({ commit,getters,state,dispath }, payload) {
    setTimeout(() => {
      commit("SET_COUNTA_REDUCE", payload);
    }, 1000);
  },
//触发方式
store.dispatch('reduceCountAsync',5)

getters
getters 的作用是 有时候我们需要从 store 中的 state 中派生出一些状态，Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），如果只需要state里面的状态，可以直接获取没必要定义一个getters

//store.js
getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  }
}
store.getters.doneTodos 

语法糖

vuex提供了一些辅助函数，即快捷方式方便我们操作state

// getter
this.$store.getters['reduceTimes']; 
...mapGetters({ //语法糖
  reduceTimes: 'reduceTimes'
})
// mutataions 
this.$store.commit('checkIndex',{name;'kk'})
...mapMutations({ //语法糖
 checkIndex:'checkIndex',
//SET_COUNTA_ADD:'modulesA/SET_COUNTA_ADD',
}),

//actions
this.$store.dispatch('addCountAAsync',{step:5})
...mapActions({
	addCountAAsync:'addCountAAsync'
})
//或者
...mapActions(['addCountAAsync'])

//state
this.$store.state.count
...mapState({
	count:state => state.count
})

模块化

1. 目录结构
   modulesB 是将actions mutations getters state 细化出去，这点不用多说
   

注意：可以通过添加namespaced: true使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

//  store/index.js
import modulesA from './modules/modulesA'
import modulesB from './modules/modulesB/index'
modules: {
  modulesA,modulesB
}
// modulesB
import action from './action'
import mutation from './mutation'
import state from './state'
import getter from './getter'
const modulesB = {
  namespaced: true,
  state: state,
  mutations: mutation,
  actions: action,
  getters: getter
}
export default modulesB 

2. 模块化下的参数变化
   在actions mutations中，context对象 与 state 变为模块化下 的context对象与state
   context 对象变为
   

// mutations context对象 变为模块化下的state
  mutations: {
    SET_COUNTA_ADD(state, payload) {
      console.log(state);
      state.countA += payload;
    }
 }
//actions
 actions: {
    addCountAAsync({commit,dispatch,getters,rootGetters,rootState}, payload) {
      setTimeout(() => {
        commit("SET_COUNTA_ADD", payload);
      }, 1000);
    }
 }

3. 模块化下的辅助函数

// getter
this.$store.getters['modulesA/countA']; 

...mapGetters({
  bGetter2: 'modulesA/countA'
})

// mutation 
this.$store.commit('modulesA/SET_COUNTA_ADD', {
  name: 'QQ'
});

...mapMutations({
  setBname: 'modulesA/SET_COUNTA_ADD'
}),

// action
this.$store.dispatch('modulesA/addCountAAsync', { name: "kk" });

...mapActions({
  aSetAge: 'modulesA/addCountAAsync',
}),

4. 使用 createNamespacedHelpers 创建基于某个命名空间辅助函数

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('modulesA') // moduleName
//像模块化之前一样写
...mapState({
  countA: state => state.countA,
}),

5. actions 注册为全局

globalAction: {
  root: true,
  globalCount({ commit }, payload) {
      setTimeout(() => {
          commit('SET_COUNTA_ADD', payload.name);
      }, 1000)
  }
}