Vuex 四个map如何使用

转载 VueJs
阅读数: 73 2022年09月18日

在用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'}),

参考资料
https://www.cnblogs.com/wzx-blog/p/15995287.html
phpriji.cn | 网站地图 | | 沪ICP备17015433号-1