目录
01 vuex的四大辅助函数的使用
mapState使用方式:
mapMutations的使用方式:
mapGetters的使用方式:
mapActions的使用方式:
02 vuex中的模块化
vuex的modules模块化的使用:
modules模块化的使用:
01 vuex的四大辅助函数的使用
帮助我们把vuex里面的数据映射到当前组件里面 然后通过this直接调用
依然保持原有的功能不变
mapState mspGetters mspMutations mapActions
mapState使用方式:
在组件中想要使用vuex中state变量 不要直接this.$store.state了
先 import { mapState } from 'vuex' 将mapState从vuex里面解构出来
在当前组件里面的computed计算属性里面 引入想要使用State的变量名
computed:{
...mapState(['state变量名1','state变量名2'...])
}
当前组件其他地方 直接this.变量名 获取state数据
mapMutations的使用方式:
在组件中想要调用vuex中mutations方法 不要直接this.$sore.commit('')
先import { mapMutations } from 'vuex'
在当前组件里面methods里面引入想要使用的mutations方法名
methods:{
...mapMutations(['mutations方法名1','mutations方法名2'...])
}
在当前组件的其他地方 直接使用this.mutations方法名调用
mapGetters的使用方式:
在组件中想要使用vuex中getters变量 不要直接this.$store.getters了
先 import { mapGetters} from 'vuex' 将mapGetters从vuex里面解构出来
在当前组件里面的computed计算属性里面 引入想要使用getters的变量名
computed:{
...mapGetters(['getters变量名1','getters变量名2'...])
}
当前组件其他地方 直接this.变量名 获取getters数据
mapActions的使用方式:
在组件中想要调用vuex中actions方法 不要直接this.$sore.dispatch('')
先import { mapActions} from 'vuex'
在当前组件里面methods里面引入想要使用的actions方法名
methods:{
...mapActions(['actions方法名1','actions方法名2'...])
}
在当前组件的其他地方 直接使用this.actions方法名调用
02 vuex中的模块化
vuex的modules模块化的使用:
modules的目的就是把大型项目的共享数据(也就是vuex中的数据) 分成一个个模块
也按照模块的方式进行处理
也就是 每个模块都有自己的state getters mutations actions
然后把多个模块放到modules 里面一起加载
modules模块化的使用:
在modules里面定义新的对象作为属性 每个对象都有单独的state mutations getters actions
组件使用时: this.$store.state/getters.当前模块的名字.变量名
在没有使用名称空间功能时,那么多个模块之间的actions和mutations方法不能重名
否则一旦commit/dispatch调用的时候 会导致所有模块的同名方法都被调用
为了避免多个模块之间的actions和mutations方法重名的问题,
可以在当前模块的第一行定义 namespaced:true 属性 表示启用命名空间
那么一旦使用了 命名空间功能再进行commit/dispatch调用时 第一个参数的方法名必须是commit('模块名/方法名')
总结:
不管启用不启用命名空间功能 ,state和getters在使用的时候必须加模块名
this.$store.state/getters.模块名.变量名
不启用命名空间如果多个模块mutations和actions方法重名 调用时就会多个模块名方法一起调用, 一旦启用就需要通过this.$store.commit/dispatch('模块名/方法名')的方式启用。