如何使用操作更改 Vuex 存储对象值？（vue.js）答案

【问题标题】：How can I change Vuex store obejct value with actions?(vue.js)如何使用操作更改 Vuex 存储对象值？（vue.js）
【发布时间】：2020-05-29 05:06:59
【问题描述】：

我将状态中的数据存储为数组，我想更改对象的值。如何使用 vuex 操作将 id 1 值更改为 true？

state.js

const array=[]

mutations.js

storeArray(state, data) {
    state.array = data;
  }

actions.js

async changeValue({ state, dispatch, commit }, id) {
    const item = await state.array[id].value;

    await commit('storeArray', { value: true });

  },

数组看起来像

[{
    id: "1",
    value: 'false'
}, {
    id: "2",
    value: 'true'
}]

【问题讨论】：

你实际上在做的只是替换array的全部数据。您宁愿遍历所有元素，检查哪一个是所需的元素/索引并相应地调整该数据。
您不需要为此使用操作。

标签： javascript vue.js vuex

【解决方案1】：

您需要事先知道新数组的 id 和值。要在状态数组中查找和更改所需的对象，您可以使用以下示例中的突变：

const store = new Vuex.Store({
  state: {
    objects: [{ id: 1, value: true }, { id: 2, value: true }]    
  },
  mutations: {
    changeObjectValue (state, { id, value }) {
        const found = state.objects.find(item => item.id === id);
        found.value = value;               
    },
  },
});

这样你就可以像这样在一个动作中提交：

store.commit('changeObjectValue', {id: 2, value: false});

在plnkr查看这个例子

【讨论】：

它一直告诉我 state.objects.find(item => item.id === id) 不是函数...
我的代码是一个示例，您需要在代码中进行所需的替换。我用一个完整的例子更新了答案，看看吧。