第四十五章 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']) - 需要开启命名空间