Update all object property of an array using vuex

Question

I am trying to update a single property of an object from an array using vuex.

here is my code in store file.

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

And below code is from my .vue file.

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
    },
  },
};

As you can see I want to update IsModified property of object. It is working perfectly fine. it is updating the each customer object.

Just want to make sure, is it correct way to update array object or I should use Vue.set.

If yes, I should use Vue.set, then How can I use it here.

tony19 · Accepted Answer · 2022-07-16 02:31:43Z

1

You are actually not mutating your array, what you do is replacing the original array with a new array generated by the filter function and the passed value. So in your example there is no need to use Vue.set.

You can find more information about replacing an array in the vue documentation.

The caveats begin however when you directly set an item with the index or when you modify the length of the array. When doing this the data will no longer be reactive, you can read more about this here.

For example, consider the following inside a mutation:

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

edited Jul 16, 2022 at 2:31

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 18, 2018 at 11:31

Wouter Vandevelde

9049 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Update all object property of an array using vuex

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related