vue项目中vuex模块化

最新推荐文章于 2025-10-19 19:33:38 发布

原创最新推荐文章于 2025-10-19 19:33:38 发布 · 448 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了在企业级Vue项目中如何使用Vuex进行模块化管理，包括在store目录下创建模块，每个模块包含state、getters、mutations、mutation-types、actions和module文件，以及如何在store/index.js中整合全局和模块状态。这种组织方式有助于保持代码的整洁，提高可维护性。在页面中，可以通过辅助函数或直接引用来调用模块的方法和数据。

企业级的项目开发中，由于功能模块很多，因此需要我们在使用vuex时进行模块化的划分，这样做的目的是为了使我们的项目代码接口更加简洁、清爽、美观，便于好维护管理

一.在store文件下划分模块，如下图所示：
在这里插入图片描述
二.在number目录下，我们需要创建state.js、getters.js、mutations.js、mutation-type.js、actions.js、number.module.js等5个js文件
1.在state.js文件中我们将state导出，如下图所示：

2.在getters.js文件中我们可以对state.js中的state的值进行修饰（getters相当于就是state的计算属性），如下图所示：
在这里插入图片描述
3.mutations-type.js中，我们可以定义mutations的type类型，如下图所示：

4.mutations.js中导入mutation-type.js中定义好的type类型，并且将mutatios中定义的同步方法导出。如下图所示：

5.actions.js中可以在actions中定义好的方法中定义通过context.commit(‘方法名’,参数)显式的提交mutations中的方法，并且将actions中定义好的方法导出，actions中的方法都是异步的，如下图所示：
在这里插入图片描述
6.在number.module.js中导入state、getters、mutations、actions，并且将number导出，如下图所示：

三、在store/index.js页面中导入number,在index.js中既有全局的state、getters、mutations、actions,同时也有模块number和模块shop的state、getters、mutations、actions,如下图所示：
在这里插入图片描述
四.shop模块的目录结构和number模块的一模一样，就不在一一叙述了，在vue页面中的使用，如下图所示：

1.在页面中不使用辅助函数的写法

2.在页面中使用辅助函数的写法