软件系统定制开发vuex分模块 开启命名空间

软件系统定制开发模块开启命名空间后，软件系统定制开发享有独自的命名空间。

{    "模块1":{        state:{},        getters:{},        mutations:{},        actions:{}    },    "模块2":{        state:{},        getters:{},        mutations:{},        actions:{}    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

、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");
1
2
3
4
5
6
7
8
9
10
11
12

三 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 }});
1
2
3
4
5
6
7
8
9
10

多模块合并写法

index.js vuex文件一个项目需要模块化开发就不能所有的代码都写在一起，所有这里越简洁越好，只需要引用modules的index.js就可以了

import Vue from 'vue'import Vuex from 'vuex'import modules from './modules'Vue.use(Vuex) const store = new Vuex.Store({  modules}) export default store
1
2
3
4
5
6
7
8
9
10

这里只需要将所有模块的文件组合起来，然后默认输出就欧了

import app from './app';import h5 from './h5';import address from './address';import share from './share';import idCard from './idCard';import auth from './auth';import consumerLoan from './consumerLoan';import coupon from './coupon';export default {    app,    h5,    address,    share,    idCard,    auth,    consumerLoan,    coupon, };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { setUserInfo, getUserInfo } from "@/common/request/auth.js";const state = {  userInfo: getUserInfo() || {}, // 获取用户信息 （头像，名字，所属城市）  wxcode:''}; const mutations = {  SET_USERINFO(state, userInfo) {    setUserInfo(userInfo);    state.userInfo = userInfo;  },  SET_WXCODE(state, code){    state.wxcode = code;  }}; const actions = {   }; export default {  namespaced: true,//这里一定要加true  state,  mutations,  actions,};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

四 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);    }  }};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

五 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);    }  }};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

六 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

七 运行效果