更改组件的存储状态值

Question

我有一个表，其中包含商店中定义的对象。在显示表格的组件中，我可以单击表格行来获取有关该特定行内容的更多信息。我想要做的是，当我选择一行时，能够将状态中的值从 false 更改为 true，以便使用所选行的内容填充另一个表。这是一些代码：

store.js

const state = {
selectedLimitCard: {},
limitCards: [
{ limitCardSelectedStatus: false }
]}

const mutations = {
  selectLimitCard: state => {
    state.limitCards.forEach(limitCard => {
      if (limitCard.limitCardSelectedStatus == true) {
        state.selectedLimitCard = limitCard;
      }
    });
  }
};

const actions = {
  selectLimitCard: ({ commit }) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(
          "!Store! value: " + state.limitCards[0].limitCardSelectedStatus
        );
        commit("selectLimitCard", state.selectedLimitCard);
        resolve();
      }, 2000);
    });
  }
};

const getters = {
  getLimitCards: state => {
    return state.limitCards;
  },
  getSelectedLimitCard: state => {
    return state.selectedLimitCard;
  }
};

组件.vue

       <v-btn
          id="nextStep"
          color="#009af9"
          large
          dark
          @click="
          modifySelectedLimitCardStatus(),
          selectLimitCard"
        >Select</v-btn>

  data: () => ({
    editedLimitCard: {
      limitCardSelectedStatus: ""
    }
  }),
  computed: {
    ...mapGetters(["getLimitCards"]),
    ...mapActions(["selectLimitCard"])
  },

  methods: {
    modifySelectedLimitCardStatus() {
      this.editedLimitCard.limitCardSelectedStatus = true;
      this.$store.state.limitCardSelectedStatus = this.editedLimitCard.limitCardSelectedStatus;
      console.log(
        "This is the edited item: " +
          this.editedLimitCard.limitCardSelectedStatus +
          "\nThis is the store value: " +
          this.$store.state.limitCardSelectedStatus
      );
    }
  }

到目前为止，当我在组件中记录值时，一切都很好，但商店状态中的值保持不变。我正在尝试更改组件中的值，因为这是我可以访问选择哪一行的逻辑的地方。有人可以指出我做错了什么的正确方向吗？

Answer 1

在

modifySelectedLimitCardStatus()

中，直接修改Vuex状态：

this.$store.state.limitCardSelectedStatus = this.editedLimitCard.limitCardSelectedStatus;

根据https://vuex.vuejs.org/guide/mutations.html：

实际更改 Vuex 存储中状态的唯一方法是提交突变。