Question

我正在尝试使用vuex从数组更新对象的单个属性。

这是我在商店文件中的代码。

export default{
  namespaced: true,
  state: {
    customers: null,
  },
  mutations: {
    UPDATE_MODIFIED_STATE(state, value) {
      state.customers = [
        ...state.customers.filter(item => item.Id !== value.Id),
        value,
      ];
    },
  },

下面的代码来自我的.vue文件。

export default {
  computed: {
    customerArray() {
      return this.$store.state.CustomerStore.customers;
    },
  },
  methods: {
    ...mapMutations('CustomerStore', ['UPDATE_MODIFIED_STATE']),
    updateCustomers() {
      if(someCondition) {
        this.customerArray.forEach((element) => {
            element.IsModified = true;
            this.UPDATE_MODIFIED_STATE(element);
        });
      }
      /// Some other code here
    },
  },
};

如您所见，我想更新对象的 IsModified 属性。运行正常。它正在更新每个客户对象。

只想确保是更新数组对象的正确方法，还是我应该使用Vue.set。

如果是，我应该使用Vue.set，然后在这里如何使用它。

Answer 1

您实际上并没有在改变数组，您要做的是将原始数组替换为由filter函数和传递的值生成的新数组。因此，在您的示例中，无需使用Vue.set。

您可以在vue documentation中找到有关替换数组的更多信息。

但是，当您直接使用索引设置项目或修改数组的长度时，警告便开始了。这样做时，数据将不再是反应性的，您可以阅读有关此here的更多信息。

例如，在一个突变中考虑以下内容：

// If you update an array item like this it will no longer be reactive.
state.customers[0] = { Id: 0, IsModified: true }

// If you update an array item like this it will remain reactive.
Vue.set(state.customers, 0, { Id: 0, IsModified: true })

使用vuex更新数组的所有对象属性

1 个答案: