第一种写法:使用带命名空间名称(奇葩)
命名空间:匹配store路径的时候需要在上对应模块的名称,state比较特殊,需要定义成函数的形式,getters通常会写在全局
第一种写法:使用带命名空间名称(奇葩)
导入:import { mapAction } from 'vuex
解构: ...mapAction(['login/setAsync'])
使用:this['login/setAsyncToken']('1')
第二种写法: 解析命名空间(繁琐)
导入:import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers('login')
解构: ...mapAction(['setAsyncToken'])
使用:this['setAsyncToken']('1')
第三种写法:给函数重命名(高级)
导入:import { mapAction } from 'vuex'
解构:...mapActions({setAsyncToken:"login/setAsyncToken"}),
使用:this.setAsyncToken("1");
注意:前两种做一个了解,认识即可,第三种是万能公式,适用于各种情况
使用示例:
// state ->
// 1.this.$store.state.模块名.title
// 2...mapState({name:state=>state.模块名.title})
// getters ->
// 1.this.$store.getters.模块名.title
// 2...getters({name:state=>state.模块名.title})
// mutations ->
// 1.this.$store.commit('article/setTitle',参数)
// 2....mapMutations({setTitle:'article/setTitle'}) 自定义的方法名: '模块名/方法名'
// action ->
// 1.this.$store.dispatch('article/setTitle',参数)
// 2....mapAction({setAsyncTitle:'article/setAsyncTitle'}) 自定义的方法名: '模块名/方法名'