Vue.js 从组件更改存储状态值

我有一个包含存储中定义的对象的表。在显示表格的组件中，我可以单击表格行以获取有关该特定行内容的更多信息。我想做的是，当我选择一行时，能够将状态中的值从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
      );
    }
  }

const state={
selectedLimitCard:{}，
限制卡：[
{limitCardSelectedStatus:false}
]}
常数突变={
选择LimitCard:state=>{
state.limitCards.forEach（limitCard=>{
if（limitCard.limitCardSelectedStatus==true）{
state.selectedLimitCard=limitCard；
}
});
}
};
常量动作={
选择LimitCard:（{commit}）=>{
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
console.log(
“！Store！value:”+state.limitCards[0]。limitCardSelectedStatus
);
提交（“selectLimitCard”，state.selectedLimitCard）；
解决（）；
}, 2000);
});
}
};
常量getters={
getLimitCards:state=>{
返回状态.limitCards；
},
getSelectedLimitCard:state=>{
返回状态。selectedLimitCard；
}
};
组件.vue
选择
数据：（）=>({
editedLimitCard：{
limitCardSelectedStatus:“
}
}),
计算：{
…映射获取程序（[“getLimitCards”），
…映射操作（[“selectLimitCard”]）
},
方法：{
modifySelectedLimitCardStatus（）{
this.editedLimitCard.limitCardSelectedStatus=true；
this.$store.state.limitCardSelectedStatus=this.editedLimitCard.limitCardSelectedStatus；
console.log(
“这是已编辑的项目：”+
this.editedLimitCard.limitCard SelectedStatus+
“\n这是存储值：”+
此。$store.state.limitCardSelectedStatus
);
}
}

---

到目前为止，当我在组件中记录值时，一切正常，但存储状态中的值保持不变。我正在尝试更改组件中的值，因为我可以访问所选行的逻辑。有人能告诉我我做错了什么吗？

在

modifySelectedLimitCardStatus（）

中，Vuex状态正在被直接修改：

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

根据：

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

---

你的行动被触发了吗？尝试阻止直接更改Vuex状态…@Simonhiel是的，该操作在单击上面所示的按钮I时触发。

commit（“selectLimitCard”，state.selectedLimitCard）第二个参数不是由变异使用的
selectLimitCard
，因此如果我理解正确，我必须找出一种方法来确定当前选择的项目，然后直接在存储中运行变异来修改状态？不能在组件中执行此操作？只有称为“突变”的特殊函数才允许修改保存在Vuex状态中的任何值。变异方法在Vuex中定义。通过使用
commit
从组件调用它们。如果您尝试以任何其他方式修改Vuex状态数据，而不是进行变异，则不会起作用。