时间戳

首页 > 解决方案 > 如何通过操作更改 Vuex 存储对象值？（vue.js）

javascript - 如何通过操作更改 Vuex 存储对象值？（vue.js）

问题描述

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

state.js

const array=[]

突变.js

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

动作.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'
}]

标签： javascriptvue.jsvuex

解决方案

您需要事先知道 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上查看此示例

推荐阅读