Vuex模块化 深入浅出超详细

Vuex 模块化

为什么需要模块化？ 随着项目规模的增长，单一的 store 文件会变得庞大且难以管理；

Vuex 的模块化是一种组织和管理应用状态的策略：，它允许将全局的状态管理分解成更小、更可管理的部分；

• 逻辑清晰： 将相关的状态、getter、mutation、action 分组，使得代码结构更加清晰；

• 命名空间： 避免不同模块间命名冲突，通过模块化可以为每个模块，提供一个唯一的命名空间，方便管理；

• 性能与维护： 模块化不仅提高了代码的可读性和可维护性，还能通过合理组织逻辑，间接提升应用的性能，

  尤其是在大型应用中，通过懒加载和按需导入模块，可以进一步优化资源加载；

模块化实现步骤：

创建模块文件： 在 store 目录下创建子目录，比如 modules 、在该目录下为每个模块创建单独的文件，如 modulediy.js

/** 自定义Vuex模块: 声明并对外暴漏 state、mutations、actions、getters */
const state = { userInfo: { name: 'zs', age: 18 }, }
const mutations = { }
const actions = { }
const getters = { }export default { state, mutations, actions, getters }

src/store/index.js： 文件中的modules配置项中，导入、注册这个模块；

// 导入 vue、vuex
import Vue from 'vue'
import Vuex from 'vuex'
import modulediy from './modules/modulediy'		//导入用户模块Vue.use(Vuex)//创建仓库 store 状态,即数据: 
const store = new Vuex.Store({//注册模块modules:{modulediy,}
})// 导出仓库 store
export default store

在组件中使用模块化状态： 创建Son4.vue组件—>组件内通过：$store.state.模块名.属性名 查看获取Vuex模块化数据；

<template><div class="box"><h2>Son4 子组件</h2>从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label></div>
</template>

获取模块 state数据

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名，使用模块中的数据：

• 方式一： 直接通过模块名访问：$store.state.模块名.xxx

• 方式二： 通过 mapState 映射，注意：Vuex模块中需要开启命名空间 namespaced : true

  默认根级别的映射 mapState([ '内部属性名','内部属性名','模块名' ])

  指定子模块的映射 ：mapState('模块名', ['模块内对应属性名xx'])

<template><div class="box"><h2>Son4 子组件</h2>从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label><hr/>从vuex mapState中获取值: <label>{{ count }}</label><hr/>从vuex mapState中获取模块对象: <label>{{ modulediy }}</label><hr/>从vuex mapState 获取指定模块中获取的值: <label>{{ userInfo  }}</label><hr/></div>
</template>
<script>import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';             export default { //计算属性:computed:{...mapState(['count','modulediy']),     //获取内部属性、modulediy模块对象;...mapState('modulediy',['userInfo']),  //还支持直接获取指定模块内、属性对象;}}
</script>

获取模块 gatters数据

modules/modulediy.js： gatters 和 state操作类似：对于启用了命名空间的模块，支持使用 mapGetters 辅助函数时；

const state = { userInfo: { name: 'zss', age: 18 }, str:"自定义模块state属性" 
}
const getters = { getstr(state){ return `年龄+1:${state.userInfo.age+1}` }
}
export default { //开启命名空间namespaced : true,  state,getters
}

组件获取模块gatters数据：

• 方式一： 直接通过模块名访问 $store.getters['模块名/属性名']
• 方式二： 通过 mapGetters 映射，子模块的映射 mapGetters('指定模块名', ['模块内属性名'])

注意：Vuex模块中需要开启命名空间 namespaced : true

<template><div class="box"><h2>Son4 子组件</h2>从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label><hr/>从vuex mapState中获取值: <label>{{ count }}</label><hr/>从vuex mapState中获取模块对象: <label>{{ modulediy }}</label><hr/>从vuex mapState 获取指定模块中获取的值: <label>{{ userInfo  }}</label><hr/>从vuex modulediy 模块getters中直接获取 <label>{{ $store.getters['modulediy/getstr'] }}</label><hr/>从vuex modulediy 模块mapGetters中映射获取 <label>{{ getstr }}</label><hr/></div>
</template>
<script>import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';             export default { //计算属性: mapState 和 mapGetters 都是映射属性computed:{...mapState(['count','modulediy']),     //获取内部属性、modulediy模块对象;...mapState('modulediy',['userInfo']),  //还支持直接获取指定模块内、属性对象; 需要开启命名空间;//mapGetters中映射获取 子模块的映射...mapGetters('modulediy',['getstr']),    }}
</script>

获取模块 mutations数据

Vuex模块化操作：mutations， 针对所在模块，对其state 状态数据，进行修改的操作；

定义模块的 Mutations： 和正常的Vuex中定义类似，如下：定义函数给模块内修改用户对象age值；

/** 自定义Vuex模块: 声明并对外暴漏 state、mutations、actions、getters */
const state = {  userInfo: { name: 'zss', age: 18 }, str:"自定义模块state属性" }
const getters = {  getstr(state){ return `用户虚岁: ${state.userInfo.age+1}` } }const mutations = { //接收两个参数: state(必须 状态数据) payload(可选 传递参数)upgradeAgeM(state,payload){ state.userInfo.age+=payload }
}
const actions = { }export default { namespaced : true,  //开启命名空间state,getters,mutations,actions,  
}

组件内使用：Vuex组件 Mutations：

• 方式一： 原生方式直接通过 store 调用：$store.commit('模块名/处理函数名', '传递参数')

• 方式二： 通过 mapMutations 辅助函数映射子模块：mapMutations('模块名',['处理函数名'])

推荐的方式是使用 mapMutations 辅助函数，它可以帮助你将模块的 mutations 映射到组件的方法中，需要开启命名空间

<template><div class="box"><h2>Son5 子组件</h2>从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label><hr/>从vuex modulediy 模块getters中直接获取 <label>{{ $store.getters['modulediy/getstr'] }}</label><hr/>直接调用:<button @click="upgradeAge(1)" >给modulediy模块用户age+1</button><hr/>mapMutations调用:<button @click="upgradeAgeM(-1)" >给modulediy模块用户age-1</button><hr/></div>
</template>
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';             export default { // mapMutations 和 mapActions 都是映射方法methods: {//原生方式调用Vuex组件: 给用户添加年龄;upgradeAge(n){ this.$store.commit('modulediy/upgradeAgeM',n) },//mapMutations 子模块映射至methods 获取模块函数;...mapMutations('modulediy',['upgradeAgeM']),}}
</script>

获取模块 action数据

Vuex 组件action： 只要是针对组件的，mutations 进行异步操作扩展，本质和mutations 操作类似；

定义模块的 action： 如下：内部调用mutations 修改age函数，给其加上异步延迟的操作；

const actions = { //actions处理异步: 不能直接操作state 还需要context.commit('mutation名','传参');upgradeAgeMSync(context,num){ setTimeout(() => { context.commit('upgradeAgeM', num) }, 1000)  }
}

组件内使用：Vuex组件 action：

• 方式一： 原生方式直接通过 store 调用：$store.dispatch('模块名/处理函数名', '传递参数')

• 方式二： 通过 mapActions 辅助函数映射子模块：mapActions('模块名',['处理函数名'])

<template><div class="box"><h2>Son5 子组件</h2>从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label><hr/>从vuex modulediy 模块getters中直接获取 <label>{{ $store.getters['modulediy/getstr'] }}</label><hr/>直接调用:<button @click="upgradeAge(1)" >给modulediy模块用户age+1</button><hr/>mapMutations调用:<button @click="upgradeAgeM(-1)" >给modulediy模块用户age-1</button><hr/><br/>直接调用:<button @click="upgradeAgeSync(1)" >延迟给modulediy模块用户age+1</button><hr/>mapActions调用:<button @click="upgradeAgeMSync(-1)" >延迟给modulediy模块用户age+1</button><hr/></div>
</template>
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';             export default { // mapMutations 和 mapActions 都是映射方法methods: {//原生方式调用Vuex mutations组件: 给用户添加年龄;upgradeAge(n){ this.$store.commit('modulediy/upgradeAgeM',n) },//mapMutations 子模块映射至methods 获取模块函数;...mapMutations('modulediy',['upgradeAgeM']),//原生方式调用Vuex actions组件: 延迟给用户添加年龄;upgradeAgeSync(n){ this.$store.dispatch('modulediy/upgradeAgeMSync',n) },//mapActions 子模块映射至methods 获取模块函数;...mapActions('modulediy',['upgradeAgeMSync']),}}
</script>

Mutations 必须是同步的原因：

mutation保证了每次同步执行之后，应用状态都会立即发生变化： 这使得时间旅行调试time-travel debugging成为可能；

DevTools 可以在每次 mutation 后捕获状态快照，从而支持状态的回溯和前进；

明确职责： mutations 专注于状态的直接变更，保持代码的纯净和单一职责原则；

状态一致性： 确保状态改变的可预测性，每个 mutation 完成后都能对应到一个明确的新状态，便于理解和测试

Actions 支持异步的原因：

actions 提供了一个封装异步操作和业务逻辑的地方：

可以触发多个mutations 来分步骤改变状态，使得代码结构更清晰，易于维护，Actions是对 Mutations的异步扩展升级；

代码管理：

本代码已经使用Git进行管理： 公众号回复：Vue项目工程化