Vuex命名空间模块中action访问state返回undefined如何解决

核心错误点 #

• Vuex的action第一个入参是上下文对象（context），而非当前模块的state，你直接把入参当做state调用属性，自然返回undefined
• Vuex要求所有state的变更必须通过mutation提交，不允许在action中直接修改state，否则状态变更无法被DevTools追踪，不符合规范

修复方案 #

你可以选择以下两种方案修改：

方案1：保留现有action写法，补全mutation逻辑

修改drawers.js代码如下：

export default {
  namespaced: true,
  state: {
    isEquipmentOpen: false,
  },
  // 新增mutation负责修改state
  mutations: {
    toggleEquipmentOpen(state) {
      state.isEquipmentOpen = !state.isEquipmentOpen;
    }
  },
  actions: {
    // 从context中解构出需要的state和commit
    test({ state, commit }) {
      console.log(state.isEquipmentOpen);
      commit('toggleEquipmentOpen');
    },
  },
};

方案2：无异步逻辑时直接调用mutation，省略action

如果你的test方法不需要处理异步请求、复杂逻辑判断，完全可以直接调用mutation，简化代码：
首先修改drawers.js，删除不需要的action：

export default {
  namespaced: true,
  state: {
    isEquipmentOpen: false,
  },
  mutations: {
    toggleEquipmentOpen(state) {
      state.isEquipmentOpen = !state.isEquipmentOpen;
    }
  }
};

然后修改World.vue的逻辑：

import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState('drawers', ['isEquipmentOpen']),
  },
  methods: {
    ...mapMutations('drawers', ['toggleEquipmentOpen']),
    test() {
      console.log(this.isEquipmentOpen);
      this.toggleEquipmentOpen();
    }
  },
};

内容的提问来源于stack exchange，提问作者Daemios