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