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+iview实现分页及查询功能
Nov 17 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
php array_filter除去数组中的空字符元素
2020/06/21 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python实现简单坦克大战
2020/03/27 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
电气自动化专业职业规划范文
2014/02/16 职场文书
对公司合理化的建议书
2014/03/12 职场文书
活动总结格式范文
2014/04/26 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
各国货币符号大全
2022/02/17 杂记
SpringBoot整合Minio文件存储
2022/04/03 Java/Android