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

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

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

Answer 1

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

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

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

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

从组件更改存储状态值

1 个答案: