Vuex之module使用方法及场景说明
作者：绿足
一、module 使用场景
在项目开发过程中，随着项目逐渐增大，数据关联复杂度逐渐加大， 多人协同开发，人员变动等。
我们会遇到vuex数据更新时，执行某个action 导致同名/未预测到的关联数据发生了变化。
vue 基本思想之一便是数据驱动， vuex 更是专门的数据状态关联库。
导致数据错误结果可想而知......
使用vuex module 命名空间概念则可以很好的解决这个问题！！！
二、实例演练
先贴个demo
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const test1 = {
namespaced: true,
state: {
name: 'moduleA',
type: 'module A'
},
mutations: {
updateNameByMutation(state, appendStr){
state.name = state.name + " append Str: " + appendStr
}
},
actions: {
udpateNameByAction({commit}, appendStr) {
commit("updateNameByMutation", appendStr)
}
},
getters: {
getNameA(state){
return state.name
}
}
}
const test2 = {
// 当namespaced=true 时， vuex, 将会自动给各自module 添加访问路径名。 方便区分moduel
namespaced: true,
state:{
name: 'moduleB',
type: 'module B'
},
mutations: {
updateNameByMutation(state, appendStr){
state.name = state.name + " append Str: " + appendStr
}
},
actions: {
// 如果不使用命名空间， 那么view 指向actions 的该方法时，会执行所有与指定action名相同的函数（即：这里module A,B 中该action都会执行）
udpateNameByAction({commit}, appendStr){
commit("updateNameByMutation", appendStr)
}
},
getters: {
getNameB(state){
return state.name
}
}
}
const storeInstall = new Vuex.Store({
state: {
name: 'i am root state name'
},
modules:{
// 这里的路径名： test1, test2, 在view 中 通过 mapActions('test1', [actionName]) 使用并区分需要使用的module
test1,
test2
}
})
export default storeInstallstore.js 几个简单的vuex 使用场景模拟。 我们有多个模块，分别为： test1, test2... 。
我们发现开发中可能会存在相同的stateName/ actionName/ mutaionName /。 (实际开发中，getterName 如果有重名编译会提示 getter 重名....)
我们使用vuex 需要实例化一个Vuex的Store构造函数。 这里storeInstall 中第一个state, 我们可以理解为根 state, 它全局可访问。 modules 中则是我们自定义注册的module. 每个module 中都有自己独立的state, action, mutation, getter...
需要注意的是，这里通过给每个module 对象添加namespaced: true, 来达到命名空间来区分Module的效果。也是通过它来区分更新/调用 对应的vuex 方法来隔离未知数据更新等数据相关问题。
Test.vue
<template>
<div>
<div>
<h2>Page Test1</h2>
</div>
<div>
<a href="javascript:" rel="external nofollow" rel="external nofollow" @click="changeName">udpate: 名称Name</a>
<a href="javascript:" rel="external nofollow" rel="external nofollow" @click="showName">显示更新后的Name</a>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
data(){
return {}
},
computed: {
...mapState('test1', {
state: state => state
})
},
methods: {
// test1 模块路径名
...mapActions('test1', [
'udpateNameByAction'
]),
changeName(){
this["udpateNameByAction"]('ha ha test1 udpate !!')
},
showName(){
console.log(this.$store.state)
},
},
mounted() {
console.log("store name: ", this.$store)
console.log("namespace test1 state: ", this.state)
}
}
</script>
这个test1.vue （还有另外一个对应的test2.vue 代码基本一样，主要用来区别两个页面vuex的更新效果）, 则向我们展示了如何使用vuex 提供的api 来做数据更新（这里介绍的是引入命名空间的module 场景）。
(1) 首先通过vuex 引入需要的api 这里主要演示 ...mapActions .
(2) 在module场景下引入mapActions 我们发现，第一个参数传的是 module 路径(就引入各个module的名称)名。 这种方式将只会在当前view中，导出指定模块下注册的 action 集合。
(3) 当调用指定定module下的action 执行state 更新操作时， vuex 通过该module名找到对一定的action 进行下一步mutation 操作。 同时受到影响state的也只会时该命名空间下的state
三、Vuex module namespaced
我们来讨论下module 设置了namespaced 与不设置vuex store 中的module数据有何区别？
打字累截个图吧，一目了然：
图1： 没有设置namespaced=true
图2： 设置namespaced=true
总结
关于vuex module 这里只是个基本讲解。
总结下来就是module 给了我们一种隔离vuex store 各个 state及相关api 的方法，让数据相关操作在复杂的项目场景可以更清晰，易追踪。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。