目录
分模块化
怎么分模块
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({ })