由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,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 分割成模块就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持站长技术。
2021年3月物联网安全服务示范系统边缘版阿里云IoT安全管理一体机率先通过公安部...
在网上看了很久,发现数据的利用ajax提交数据到后台其实很简单,但是很多讲解的...
一、微信支付 1、业务平台介绍 1微信公众平台 微信公众平台是微信公众账号申请入...
视频 将“新型冠状病毒”转换为二进制??? 视频地址: https://www.bilibili.c...
Asp+Rss阅读器制作 转自凌云的BLOG 我在这里只是作了一个测试。大家可以把它具体...
断言(Assertions)在正则表达式概念里面难理解,它通常指的是在目标字符串的当...
主要有五个方面: 一..HTML页面转UTF-8编码问题 二.PHP页面转UTF-8编码问题 三.M...
Overview 段永平谈价值投资买股票就是买公司买公司就是买公司的未来现金流折现。...
刚开始接触PHP开发,搭建开发环境是第一步,网上下载PhpStorm和PhpStudy软件,怎...
在Expresso中,测试“多行模式” 测试一 注意:这里样例文本中3eeeee后面没有回...