vuex Module将 store 分割成模块的操作


Posted in Vue.js onDecember 07, 2020

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

const moduleA = {
 state: () => ({ ... }),
 mutations: { ... },
 actions: { ... },
 getters: { ... }
}
 
const moduleB = {
 state: () => ({ ... }),
 mutations: { ... },
 actions: { ... }
}
 
const store = new Vuex.Store({
 modules: {
 a: moduleA,
 b: moduleB
 }
})
 
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

补充知识:vuex实现模块化分割,在不同类别的文件中放置对应的数据及操作

目录结构为

store文件夹下有index.js 、modules文件夹,在modules文件夹下是你的模块,最好通过功能命名

一级目录:store

一级目录下文件:index.js

二级目录:modules

三级目录demo

三级目录下文件demo.js

三级目录下文件getter.js

三级目录下文件mutations.js

三级目录下文件 state,js

各文件的内容为

一级目录下index.js

import Vue from 'vue'
import Vuex from 'vuex'
import demo from './modules/demo/demo.js';
Vue.use(Vuex);
const $store = new Vuex.Store({
modules: {


demo

}
});
export default $store;

三级目录下demo.js

import state from './state.js';
import mutations from './mutations.js';
// 按需要导入
// import getters from './getters.js';
// import actions from './actions.js';

export default{
// 将导入的文件暴露出去
 state,
 mutations
}

三级目录其他文件

export default{}

最后在main.js中挂载

import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'
//引入vuex
import store from './store'
//把vuex定义成全局组件
Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
 store,
  ...App
})
app.$mount();

以上这篇vuex Module将 store 分割成模块就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
You might like
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
vue组件间通信解析
2017/03/01 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python实现的发邮件功能示例
2019/09/11 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
班级德育工作实施方案
2014/02/21 职场文书
出纳员的岗位职责
2014/02/22 职场文书
预备党员转正考核材料
2014/06/03 职场文书
学籍证明模板
2014/11/21 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python