Vuex State模块化

当应用非常复杂的时候，store对象就会变得非常臃肿。
为了解决上面的问题，我们将store分成模块
文件目录如下
方案一：

方案二：

状态管理中 state 就相当于 vue中 data属性， getters就相当于vue中的computed属性， mutations,
actions就相当于vue中的方法

getter

gettetr被认为 是计算属性 返回值会作为依赖缓存起来 只有当依赖发生变化时才会重新计算

mutation

action

模块化

import Vue from "vue"
import Vuex from "vuex"
import footerStatus from './modules/footerStatus'
import collection from './modules/collection'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: { // 这里声明两个模块，后面使用就知道为啥要这样搞了
    collection,
    footerStatus
  }
})

1.模块化以后，state的获取务必要加上一个模块名，才能获取到模块里面的对象

eg:  
	this.$store.state.moduleA.name

2.在辅助函数中我们同样需要这样做

	...mapState({
	name:state => state.moduleA.name
})

3.命名空间
一旦去做了模块化处理，这样一定会产生命名冲突。
所以我们利用了namespace:true来避免命名冲突
当模块被注册之后
模块里面的state action mutation会自动根据 模块名自动调整命名

export default moduleA {
		namespace:true,
		state,
		action,
		mutation
	}

同样vuex的开发者考虑到，我们每次都要写模块名很麻烦，所以在辅助函数中给我们提供了一个参数位置来绑定命名空间

...mapstate('moduleA',{
	name：state=>state.name
})

const board = {
  //数据当前的状态
  state:{
    boardDataset:[]
  },
//get获取状态 类似于computed
  getters:{
    getBoardDataset(state){
      return state.boardDataset
    }
  },
//同步更新状态
  actions:{
    changeBoardDataset(state , item){
      state.boardDataset.push(item)
    }
  },
//异步更新状态
  mutations:{
    asynChangeBoardDataset(context,item){
      context.commit('changeBoardDataset',item)
    }
  }
}

//导出模块
export default board;

在需要的组件中我们通过辅助函数进行引用：

 ...mapState({boardDatasets:state=>state.board.boardDataset})