第四十五章 Vue之Vuex模块化创建（module）
目录
一、引言
二、模块化拆分创建方式
三、模块化拆分完整代码
3.1. index.js
3.2. module1.js
3.3. module2.js
3.4. module3.js
3.5. main.js
3.6. App.vue
3.7. Son1.vue
3.8. Son2.vue
四、访问模块module的state
五、访问模块中的getters
六、mutations修改模块的state
七、action修改模块的state
一、引言
由于 vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象。
当应用变得非常复杂时，store 对象就有可能变得相当臃肿，也就是当我们的项目变得越来越大的时候，Vuex会变得越来越难以维护。
二、模块化拆分创建方式
这个时候我们就需要考虑到模块的拆分，将不同功能模块对应的store由单独的index.js进行管理，比如我们有module1、module2、module3三个业务模块，我们将三个模块挂载到store目录下的index.js中统一管理：
三、模块化拆分完整代码
3.1. index.js
// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'
import module1 from './module1/module1'
import module2 from './module2/module2'
import module3 from './module3/module3'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库（空仓库）
const store = new Vuex.Store({// 严格模式（有利于初学者，检测不规范的代码 => 上线的时候可以去掉）strict: true,// 1. 通过 state提供数据（所有组件可以共享）state: {title: '大标题',count: 100,list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数，第一个参数，都是 stateaddCount (state, n) {// 修改数据state.count += n},subCount (state, n) {// 修改数据state.count -= n},changeTitle (state, obj) {state.title = obj.newTitle},changeCount (state, newCount) {state.count += newCount}},// 3. actions处理异步，它不能直接操作state，操作state还是需要commit mutationactions: {// context 上下文 （此处因为我们还未分模块，可以当成store仓库）// context.commit('mutation名字', 额外参数)changeCountAction (context, num) {// 这里是setTimeout模拟异步，以后大部分场景是发请求setTimeout(() => {context.commit('changeCount', num)}, 1000)}},// 4. getters 类似于计算属性getters: {// 注意点：// 1. 形参第一个参数，就是state// 2. 必须有返回值，返回值就是getters的值filterList (state) {return state.list.filter(item => item > 5)}},modules: {module1,module2,module3}
})// 导出给main.js使用
export default store
3.2. module1.js
const state = {favourite: '骑行',desc: '爱好'
}const mutations = {}
const actions = {}
const getters = {}export default {state,mutations,actions,getters
}
3.3. module2.js
const state = {age: '34',desc: '年龄'
}const mutations = {}
const actions = {}
const getters = {}export default {state,mutations,actions,getters
}
3.4. module3.js
const state = {name: '王哲晓',desc: '姓名'
}const mutations = {}
const actions = {}
const getters = {}export default {state,mutations,actions,getters
}
3.5. main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')
3.6. App.vue
<template><div id="app"><h1>根组件 - {{ title }} - {{ count }}</h1><input :value="count" @input="handleInput" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'export default {name: 'app',created () {console.log(this.$store.state.count)},data () {return {}},methods: {handleInput (e) {// 1.实时获取输入框的值const num = e.target.value// 2.提交mutation，调用mutation函数this.$store.commit('changeCount', num)}},computed: {...mapState(['count', 'title'])},components: {Son1,Son2}
}
</script><style></style>
3.7. Son1.vue
<template><div class="box"><h2>{{ $store.state.title }}</h2>从vuex中获取的值：<label>{{ $store.state.count }}</label><br /><button @click="subCount(1)">值 + 1</button><button @click="subCount(5)">值 + 5</button><button @click="subCount(10)">值 + 10</button><button @click="handleSub(1)">值 - 1</button><button @click="handleSub(5)">值 - 5</button><button @click="handleSub(10)">值 - 10</button><button @click="handleChange(34)">值 + 34</button><button @click="changeTitle">改标题</button><button @click="changeCountAction(6666)">1秒钟后化神</button><hr /><div>{{ $store.state.list }}</div><div>{{ $store.getters.filterList }}</div><hr /><div>{{ filterList }}</div></div>
</template><script>
import { mapMutations, mapActions, mapGetters } from 'vuex'
export default {name: 'Son1Com',computed: {...mapGetters(['filterList'])},methods: {handleAdd (n) {// 错误代码（vue默认不会监测，监测需要成本）// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念，进行修改仓库数据// 需要提交调用mutationthis.$store.commit('addCount', n)},...mapMutations(['subCount']),...mapActions(['changeCountAction']),changeTitle () {this.$store.commit('changeTitle', {name: '王哲晓',newTitle: '2024加油，迎接新的开始，新的起点，新的人生'})},handleChange (n) {// 调用action// this.$store.dispatch('action名字', 额外参数)this.$store.dispatch('changeCountAction', n)}}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>
3.8. Son2.vue
<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值：<label>{{ count }}</label><br><button>值 - 1</button></div></template><script>
import { mapState } from 'vuex'
export default {name: 'Son2Com',computed: {...mapState(['count'])}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>
四、访问模块module的state
虽然我们已经对store进行了分模块，但其实子模块的状态，还是会挂到根级别的state 中，属性名就是模块名
使用模块中的数据：
① 直接通过模块名访问 $store.state.模块名.xxx
② 通过 mapState 映射
默认根级别的映射 mapState([ 'xxx' ])
子模块的映射 mapState('模块名', ['xxx']) - 需要开启命名空间
五、访问模块中的getters
使用模块中 getters 中的数据：
① 直接通过模块名访问 $store.getters['模块名/xxx ']
② 通过 mapGetters 映射
默认根级别的映射 mapGetters([ 'xxx' ])
子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间
六、mutations修改模块的state
默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。
调用子模块中的mutation方法：
① 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
② 通过 mapMutations 映射
默认根级别的映射 mapMutations([ 'xxx' ])
子模块的映射 mapMutations('模块名', ['xxx']) - 需要开启命名空间
七、action修改模块的state
action的修改调用语法直接类比mutation即可，默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。
调用子模块中 action ：
① 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
② 通过 mapActions 映射
默认根级别的映射 mapActions([ 'xxx' ])
子模块的映射 mapActions('模块名', ['xxx']) - 需要开启命名空间
