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

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，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 分割成模块就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    1.什么是Store? 上一篇文章说了,Vuex就是提供一个仓库,Store仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules. 总结,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法

  • vuex 动态注册方法 registerModule的实现

    Vuex(2.3.0+)可以用store.registerModule方法在进入路由时进行注册,离开路由时候销毁 actions, mutations, getters, state,在一定范围内相同名称不会被覆写 例子 index.js 传this 的写法 module.exports = { install(_this) { _this.$store.registerModule(['abc'], { namespaced: true, state: { rightTest: 999 },

  • Vuex modules模式下mapState/mapMutations的操作实例

    当我们使用 Vuex 实现全局状态维护时,可能需要将状态值划分多个模块,比如一些 root 级的用户登录状态,token,用户级的用户信息,购物车级的购物车信息. 下面我们实例演示下如何在多模块下使用 mapState/mapMutations. modules 只作用于属性,属性会归属在相应的模块名的命名空间下. mutations, actions, getter 没有命名空间的限定,所以要保证全局的唯一性,否则后者会覆盖前者 store/index.js import Vue from '

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

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块--从上至下进行同样方式的分割: const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, gette

  • Python如何将将模块分割成多个文件

    问题 你想将一个模块分割成多个文件.但是你不想将分离的文件统一成一个逻辑模块时使已有的代码遭到破坏. 解决方案 程序模块可以通过变成包来分割成多个独立的文件.考虑下下面简单的模块: # mymodule.py class A: def spam(self): print('A.spam') class B(A): def bar(self): print('B.bar') 假设你想mymodule.py分为两个文件,每个定义的一个类.要做到这一点,首先用mymodule目录来替换文件mymodu

  • Vuex 单状态库与多模块状态库详解

    什么情况下使用vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的.如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择. 之前在做旅游页的时候对 Vuex 进行了简单的了解.近期在做 Vue 项目的同时重新学习了 Vuex .本篇博文主要总结一下 Vuex 单状态库和多模块 modules 的两类使用场景. 本

  • JS中split()用法（将字符串按指定符号分割成数组）

    废话不多说了,直接给大家贴代码. <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> </head> <body> </body> <script type="text/javascript"> //在Javascript脚本中,将字符串按指定符号进行分割

  • php将字符串随机分割成不同长度数组的方法

    本文实例讲述了php将字符串随机分割成不同长度数组的方法.分享给大家供大家参考.具体分析如下: 这里使用php对字符串在指定的长度范围内进行随机分割,把分割后的结果存在数组里面 function RandomSplit($min, $max, $str){ $a = array(); while ($str != ''){ $p = rand($min, $max); $p = ($p > strlen($str)) ? strlen($str) : $p; $buffer = substr($

  • Java中将String类型依照某个字符分割成数组的方法

    将下列字符串,依照|拆分成数组: String numbers = "1|2|3|4|5"; 使用split拆分 String[] numberArray = numbers.split("\\| "); 以上这篇Java中将String类型依照某个字符分割成数组的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: java 字符串分割的三种方法(总结) Java中分割字符串的两种方法实例详解 java Stri

  • php把字符串指定字符分割成数组的方法

    实例如下: <?php $str="1|2|3|4|5|"; $var=explode("|",$str); print_r($var); ?> $var=explode("|",$str); 把$str按|进行分割 php还有其他的把字符串指定字符分割成数组 str_split(string,length) 参数 描述 string 必需.规定要分割的字符串. length 可选.规定每个数组元素的长度.默认是 1. json_de

  • python实现将文件夹内的每张图片批量分割成多张

    python实现将文件夹内的每张图片批量分割成多张

    一.说在前面 需求:有一张长为960,宽为96的图片,需要将其分割成10张96*96的图片并存放在另外一个文件夹下,通过手工分割耗时且不规范,选择python写一个简单的程序完成. 二.源码 # -*- coding: utf-8 -*- """ Created on Thu Aug 23 18:19:09 2018 @author: Administrator """ import os from PIL import Image # 切割图片

  • JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值

    删除数组指定的某个元素 var msg = " "; //textarea 文本框输入的内容 var emp = [ ]; //定义一个数组,用来存msg分割好的内容 1. 首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: //封装移除方法 Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice

  • php使用array_chunk函数将一个数组分割成多个数组

    php中可以用array_chunk将一个数组分隔成若干个数组. 数组 $array = ['name' => 'tom', 'age' => 20, 3, 4, 5, 'a', 'b']; 每3个分割一组 $chunk_result = array_chunk($array, 3); 结果 Array ( [0] => Array ( [0] => tom [1] => 20 [2] => 3 ) [1] => Array ( [0] => 4 [1] =

随机推荐