vuex模块化

怎么分模块

1 在vuex的store文件夹里添加一个js文件，内容如下

export default {
 
// 代表这是一个命名独立的空间，不会与index.js里的命名冲突与污染
namespaced:true,   
 
state:{},
 
mutations:{},
 
getters:{},
 
actions:{},
 
}

2 vuex的index.js引入并定义

// 引入
import son from './son.js'
 
// 在modules里注册
export default new Vuex.Store({ 
 
 modules: { son, },
 
 })

模块化后，在vue组件里的使用

//  state 的使用
 
this.$store.state.模块名.数据名
 
// mutations 的使用
 
this.$store.commit('模块名/模块事件名'，传的数据)
 
// actions 的使用
 
this.$store.dispath('模块名/模块异步事件名')

vuex的辅助函数

都有什么辅助函数

mapState  mapActions  mapMutations  mapGetters

默认为vuex的index.js的辅助函数

引入

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

注意事项：  

mapState与mapGetters 推荐在计算属性里 使用， 可以直接做data数据使用

 computed: {
    ...mapState(["shopData"]),
  },

其他辅助函数在 methods 里

methods: {
    ...mapActions(["getData"]),
    ...mapMutations(["add"]),
  }

两种遍历方式

 
// 对象方式  不能简写,前面是当前vue组件里的命名，可以修改，后面是vuex里的命名，不能修改
 
...mapState({ name:'name' })
 
// 数组方法
 
...mapState(['name'])

分模块后的使用辅助函数

需引入一些数据

// 引入
 
import {createNamespacedHelpers} from 'vuex'
 
// 定义的不同  mapStateSon为另外定义的命名
 
const {mapState:mapStateSon} = createNamespacedHelpers

使用方法  除命名外，其他遵循以上规则

// mapStateSon为定义的别名
 
...mapStateSon({ })