从组件更改存储状态值

Question

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

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;
  }
};

component.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
      );
    }
  }

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

Answer 1

在modifySelectedLimitCardStatus()中直接修改Vuex状态：

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

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

The only way to actually change state in a Vuex store is by committing a mutation.

从组件更改存储状态值

Changing a store state value from a component

vue.js

vuex