模块开启命名空间后,享有独自的命名空间。

{
"模块1":{
state:{},
getters:{},
mutations:{},
actions:{}
},
"模块2":{
state:{},
getters:{},
mutations:{},
actions:{}
}
}

mapState、mapGetters、mapMutations、mapActions第一个参数是字符串(命名空间名称),第二个参数是数组(不需要重命名)/对象(需要重命名)。

mapXXXs('命名空间名称',['属性名1','属性名2'])

mapXXXs('命名空间名称',{

  '组件中的新名称1':'Vuex中的原名称1',

  '组件中的新名称2':'Vuex中的原名称2',

})

一 项目结构

二 main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index"; Vue.config.productionTip = false; new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");

三 index.js

import Vue from "vue";
import Vuex from "vuex";
import cat from "./modules/cat";
import dog from "./modules/dog"; Vue.use(Vuex); export default new Vuex.Store({
modules: { cat, dog }
});

四 cat.js

export default {
namespaced: true,
// 局部状态
state: {
name: "蓝白英短",
age: 1
},
// 局部读取
getters: {
desc: state => "宠物:" + state.name
},
// 局部变化
mutations: {
increment(state, payload) {
state.age += payload.num;
}
},
// 局部动作
actions: {
grow(context, payload) {
setTimeout(() => {
context.commit("increment", payload);
}, 1000);
}
}
};

五 dog.js

export default {
namespaced: true,
// 局部状态
state: {
name: "拉布拉多",
age: 1
},
// 局部读取
getters: {
desc: state => "宠物:" + state.name
},
// 局部变化
mutations: {
increment(state, payload) {
state.age += payload.num;
}
},
// 局部动作
actions: {
grow(context, payload) {
setTimeout(() => {
context.commit("increment", payload);
}, 1000);
}
}
};

六 HelloWorld.vue

<template>
<div class="hello">
<h3>Vuex状态树</h3>
<div>{{this.$store.state}}</div>
<h3>mapState</h3>
<div>{{catName}} {{catAge}}</div>
<div>{{dogName}} {{dogAge}}</div>
<h3>mapGetters</h3>
<div>{{catDesc}}</div>
<div>{{dogDesc}}</div>
<h3>mapMutations</h3>
<button @click="catIncrement({num:1})">猫变化</button>
<button @click="dogIncrement({num:1})">狗变化</button>
<h3>mapActions</h3>
<button @click="catGrow({num:1})">猫动作</button>
<button @click="dogGrow({num:1})">狗动作</button>
</div>
</template> <script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"; export default {
name: "HelloWorld",
computed: {
...mapState("cat", {
catName: "name",
catAge: "age"
}),
...mapState("dog", {
dogName: "name",
dogAge: "age"
}),
...mapGetters("cat", {
catDesc: "desc"
}),
...mapGetters("dog", {
dogDesc: "desc"
})
},
methods: {
...mapMutations("cat", { catIncrement: "increment" }),
...mapMutations("dog", { dogIncrement: "increment" }),
...mapActions("cat", { catGrow: "grow" }),
...mapActions("dog", { dogGrow: "grow" })
}
};
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

七 运行效果

原文:https://www.cnblogs.com/sea-breeze/p/11321961.html

Vuex官网:https://vuex.vuejs.org/zh/guide/modules.html

Vuex模块:开启命名空间的更多相关文章

  1. Vuex模块:不开启命名空间

    模块不开启命名空间时,会共享全局命名空间. { state: { 模块1: "局部状态1", 模块2: "局部状态2" }, getters: { getter ...

  2. 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载

    目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...

  3. JS模块与命名空间的介绍

    起因将代码组织到类中的一个重要原因是让代码更加“模块化”,可以在很多不同的场景中实现代码的重用.但类不是唯一的模块化代码的方式. 一般来讲,模块是一个独立的JS文件.模块文件可以包含一个类定义.一组相 ...

  4. TypeScript完全解读(26课时)_15.模块和命名空间

    新建文件夹ts-modules 并新建index.ts 在根index.ts内引入 新建a.ts文件 ts在1.5之前有两个概念一个是内部模块,一个是外部模块,因为在1.5之前es6的标准还没有提出 ...

  5. vuex 模块

    今天,在我编写系统中一个模块功能的时候,由于我使用vuex存储数据的状态,并分模块存储.我是这样在存储文件中定义state,getters,actions,mutations的,我打算在不同模块文件都 ...

  6. 一个简单的实例演示vuex模块化和命名空间

    因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题 ----------- ...

  7. 在vue组件中访问vuex模块中的getters/action/state

    store的结构: city模块: 在各模块使用了命名空间的情况下,即 namespaced: true 时: 组件中访问模块里的state 传统方法: this.$store.state['模块名' ...

  8. TypeScript 素描 - 模块、命名空间

    /* 其实前面一些都是废话,因为都和C#类似.从模块开始就需要深入的去理解了 文档反复声明了 内部模块现在称做 命令空间 外部模块称为 模块 模块在其自身的作用域里执行,而不是在全局作用域里,也就是说 ...

  9. TypeScript学习笔记(八):1.5版本之后的模块和命名空间

    我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...

随机推荐

  1. BZOJ2278 [Poi2011]Garbage[欧拉回路求环]

    首先研究环上性质,发现如果状态不变的边就不需要动了,每次改的环上边肯定都是起末状态不同的边且仅改一次,因为如果有一条边在多个环上,相当于没有改,无视这条边之后,这几个环显然可以并成一个大环.所以,我们 ...

  2. @GetMapping、@PostMapping、@PutMapping、@DeleteMapping、@PatchMapping、@RequestMapping详解

    最近写项目中突然发现有人再controller层写@PostMapping,这对于经常用@RequestMapping的我来说,感到跟奇怪,网上搜寻了一些资料,特在此整合一下: Spring4.3中引 ...

  3. [Spring] Spring Data JPA

    Previouly we need to define a DAO interface and a DAO impl for 'Employee', it is not so reuseable, s ...

  4. nginx与php之间的交互方式

    1.  2种方式 TCP的socket  跟 UNIX的socket 2.TCP的socket  首先进入容器然后修改nginx下的配置文件 3. 修改/usr/local/nginx/conf/ng ...

  5. 【Java-算法】 十六进制转字节数组

    Java Code public class Convert{ public static void main(String args[]) { String sHex = "00 B6 0 ...

  6. react-native-pg-utils(对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法.)

    react-native-pg-utils 对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法. 每次新建react-native项目之后都会发现有一些很常用的方法在这 ...

  7. php+文件分块上传

    PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...

  8. vim 自动代码格式调整

    1,gg 跳转到第一行 2,shift+v 转到可视模式 3,shift+g 全选 4,按下神奇的 =

  9. python 垃圾回收笔记

    目录 引用计数 python内部的引用计数机制 循环引用 调试内存泄漏 总结 python 程序在运行的时候,需要在内存中开辟出一块空间,用于存放运行时产生的临时变量:计算完成后,再将结果输出到永久性 ...

  10. codeforces1209E2 状压dp,枚举子集

    题意 给一个n行m列的矩阵,每一列可以循环移位,问经过任意次移位后每一行的最大值总和最大为多少. 分析 每一行的最大值之和最大,可以理解为每一行任意选择一个数使它们的和最大. 设\(dp[i][S]\ ...