目录
[3.1. index.js](#3.1. index.js)
[3.2. module1.js](#3.2. module1.js)
[3.3. module2.js](#3.3. module2.js)
[3.4. module3.js](#3.4. module3.js)
[3.5. main.js](#3.5. main.js)
[3.6. App.vue](#3.6. App.vue)
[3.7. Son1.vue](#3.7. Son1.vue)
[3.8. Son2.vue](#3.8. Son2.vue)
一、引言
由于 vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象。
当应用变得非常复杂时，store 对象就有可能变得相当臃肿，也就是当我们的项目变得越来越大的时候，Vuex会变得越来越难以维护。
二、模块化拆分创建方式
这个时候我们就需要考虑到模块的拆分，将不同功能模块对应的store由单独的index.js进行管理，比如我们有module1、module2、module3三个业务模块，我们将三个模块挂载到store目录下的index.js中统一管理：
三、模块化拆分完整代码
3.1. index.js
html
// 存放的是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函数，第一个参数，都是 state
addCount (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 mutation
actions: {
// 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 store3.2. module1.js
html
const state = {
favourite: '骑行',
desc: '爱好'
}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}3.3. module2.js
html
const state = {
age: '34',
desc: '年龄'
}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}3.4. module3.js
html
const state = {
name: '王哲晓',
desc: '姓名'
}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}3.5. main.js
html
import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store
}).$mount('#app')3.6. App.vue
html
<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
html
<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 核心概念，进行修改仓库数据
// 需要提交调用mutation
this.$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
html
<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']) - 需要开启命名空间
