vuex 多modules 下的映射写法！

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
import modulea from "./modulea"
export default new Vuex.Store({
  state: {
    message: "hello action",
    name: "xiaoming"
  },
  mutations: {
    set_message(state, args) {
      state.message = args;
    }
  },
  actions: {
    setMessage({ commit }, args) {
      commit("set_message", args);
    }
  },
  getters: {
    newMessage(state) {
      return state.message.split("").reverse().join("");
    }
  },
  modules: {
    a: modulea
  }
});

modulea.js

const user = {
    namespace: true,
    state: {
        "name": "zz"
    },
    actions: {
        deal1({ commit }, args) {
            console.log("deal1");
        }
    },
    getters: {
        title() {
            return "wyj";
        }
    },
    mutations: {

    },
    modules: {

    }
}
export default user;

然后在组件about.vue 中使用

我要说的是state 区分，别的 getters actions 不区分

about.vue

<template>
  <div>
    <p>{
   
   {title}}</p>
    <el-button @click="deal1">setMessage</el-button>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState({
      name: state => state.name,
      name2: state => state.a.name,
      message: state => state.message
    }),
    // 不带 namespace：true 则不带命名空间，
    ...mapGetters(["newMessage", "title"])
  },
  methods: {
    ...mapActions(["deal1"])
  }
};
</script>

<style lang="scss" scoped>
</style>

在这里我们分别截图下：

好了，这篇就到这里，下一篇，我们就得加namespace 了，这个写法又得变