vuex 多modules 下的映射写法！

最新推荐文章于 2025-05-26 03:30:35 发布

爱生活，爱编程

最新推荐文章于 2025-05-26 03:30:35 发布

阅读量820

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE2.x

本文链接：https://blog.youkuaiyun.com/qq_15009739/article/details/108036519

VUE2.x 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了在Vuex中如何在多模块环境下进行state的映射和区分，提到了在组件about.vue中使用modulea.js模块的情况。在组件内部，state的映射需要特别注意，而getters和actions则不需要做区分。文章通过截图展示了具体的使用方法，并预告下篇将探讨加入namespace后的写法变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

在这里我们分别截图下：