Обновить все свойства объекта массива с помощью vuex

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

Вы на самом деле не изменяете свой массив, вместо этого вы заменяете исходный массив новым массивом, сгенерированным функцией фильтра и переданным значением.Так что в вашем примере нет необходимости использовать Vue.set.

Более подробную информацию о замене массива можно найти в vue документации .

Однако предупреждения начинаютсякогда вы непосредственно устанавливаете элемент с индексом или когда вы изменяете длину массива.При этом данные больше не будут реагировать, вы можете прочитать больше об этом здесь .

Например, рассмотрите следующее внутри мутации:

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