对 Vuex 模块感到困惑

Question

我会尽量把它布置得干净利落：

我有一个正在渲染的 Vue 组件，名为 World.vue:

<template>
  <v-container>
    This is the whole world
    <v-btn @click="test()" />
  </v-container>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('drawers', ['isEquipmentOpen']),
  },
  methods: {
    ...mapActions('drawers', ['test']),
  },
};
</script>

我在 Vuex 商店中有一个名为 drawers (drawers.js) 的模块：

export default {
  namespaced: true,
  state: {
    isEquipmentOpen: false,
  },
  actions: {
    test(state) {
      console.log(state.isEquipmentOpen);
      state.isEquipmentOpen = !state.isEquipmentOpen;
    },
  },
};

我不明白的是为什么调用 test() 时，它无法访问 isEquipmentOpen（记录值 undefined）。如何操作 isEquipmentOpen？

Answer 1

您不能改变操作的状态值。

您需要创建一个突变属性，在其中创建一个 setter 方法并调用它以更改值。
将 { commit } 参数传递给操作中的方法属性。

您不需要在操作方法中传递状态参数。 确保 commit() 中的字符串值与 setter 名称相同。

export default {
  namespaced: true,
  state: {
    isEquipmentOpen: false,
  },
  actions: {
    test({ commit }) {
      console.log(state.isEquipmentOpen);
      
      commit("setIsEquipmentOpen");
    },
  mutations: {
    setIsEquipmentOpen: state => state.isEquipmentOpen != state.isEquipmentOpen 
  },
};

希望你明白答案！

对 Vuex 模块感到困惑

Confused about Vuex modules

vue.js

vuex