在用vuex的时候,发现 map 没效果。找到一片比较完整的文章,备份以后方便查询。
mapState方法:用于帮助我们映射state中的数据为计算属性
computed: { //借助mapState生成计算属性: sum、school、subject(对象写法) ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性: sum、 school、subject (数组写法) ...mapState(['sum','school','subject']), },
mapGetters方法:用于帮助我们映射getters中的数据为计算属性
computed: { //借助mapGetters生成计算属性: bigSum(对象写法) ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性: bigSum(数组写法) ...mapGetters(['bigsum']) },
mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数
methods:{ //靠mapActions生成: incrementOdd、 incrementWait(对象形式) ...mapActions({incrementOdd :'jiaOdd' ,incrementwait:'jiaWait'}) //靠mapActions生成: incrementOdd、 incrementWait(数组形式) ...mapActions([ 'jiaOdd','jiaWait']) }
mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数
methods:{ //靠mapActions生成:increment、decrement(对象形式) ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成:JIA、JIAN(对象形式) ...mapMutations(['JIA','JIAN']), }
备注: mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
模块化+命名空间
1.目的:让代码更好维护,让多种数据分类更加明确。
2.修改store.js
const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations:{ ... }, actions: { ... }, getters: { bigSum(state){ return state.sum*10 } } } const personAbout = { namespaced:true,//开启命名空间 state:{ ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { countAbout, personAbout } })
3.开启命名空间后,组件中读取state数据:
//方式一:自己直接读取 this.$store.state.personAbout. list //方式二:借助mapState读取: ...mapState('countAbout', ['sum','school','subject']),
4.开启命名空间后,组件中读取getters数据:
//方式一:自己直接读取 this.$store.getters ['personAbout/firstPersonName'] //方式二:借助mapGetters读取; ...mapGetters('countAbout',['bigSum'])
5.开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方式二:借助mapActions: ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiawait'})
6.开启命名空间后,组件中调用commit
//方式一:自己直接commit this.$store.commit('personAbout/ADD_PERSON',person) //方式二:借助mapMutations: ...mapMutations('countAbout' ,{increment:'JIA', decrement:'JIAN'}),