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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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函数in_array()使用详解
2014/08/20 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
React之PureComponent的使用作用
2018/07/10 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
演讲比赛获奖感言
2014/02/02 职场文书
家长写给孩子的评语
2014/04/18 职场文书
化工操作工岗位职责
2014/04/29 职场文书
幼儿老师求职信
2014/06/30 职场文书
工作求职信
2014/07/04 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
旅行社计调工作总结
2015/08/12 职场文书
分析Python list操作为什么会错误
2021/11/17 Python