What is the right way assign an array in Vue.js?

Question

I have a Vue.js store with an array and a mutation that sets it after is is reloaded via an API:

export default new Vuex.Store({
  state: {
    triggeredTests: [],
  mutations: {
    setTriggeredTest(state, data) {
      state.triggeredTests = _
        .chain(data)
        .forEach((item) => {
          item.dateFormatted = moment(item.date).format('DD MMMM YYYY');
          item.explanationTest = testMapping.get(item.test);
        })
        .orderBy('date')
        .groupBy('date')
        .value();
    },
  },
});

Should I use some specific mutation method to assign the array here to make the bound components refresh correctly?

Bob Fanger · Accepted Answer · 2018-10-03 20:34:08Z

1

The triggeredTests property is already in the store (via state:) so Vue has added change listeners and state.triggeredTests = newArray triggers a change.

You only need Vue.set(state, 'triggeredTests', newArray) when a property was not known before.

However changes may not be visible inside a Component that only listens to changes to an item in the previous array.

Using mapState() and using the triggeredTests variable you'll make sure changes to the array are reflected in the component.

computed: mapState({
   item: state => state.triggeredTests.find( ... )
})

answered Oct 3, 2018 at 20:34

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

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

2 Comments

Alexey Starinsky Over a year ago

What about the performance of state.triggeredTests.find( ... ) ?

Bob Fanger Over a year ago

Vue is smart about recomputing computed properties and javascript is really fast, but it's faster if you can lookup them up directly state => state.entities[this.id]. Then you'll likely need to use Vue.set(state.entities, id, item) in your stores.

JBeagle · Accepted Answer · 2018-10-03 20:49:55Z

0

If you are resetting the entire array you can use Vue.Set() and create a copy of the array. Below is a rough version of this:

export default new Vuex.Store({
state: {
  triggeredTests: [],
},
mutations: {
    MUTATE_ITEMS: (state, items) => {
        Vue.set(state, 'items', [items]);
    }
},
actions: {
    loadTriggeredTests: (context, data) => {
        const newTriggeredTests = array1.map(item => {
            return {
                dateFormatted : moment(item.date).format('DD MMMM YYYY'),
                explanationTest : testMapping.get(item.test)
            }
        });

        context.commit("MUTATE_ITEMS", newTriggeredTests);
    }
}
});

edited Oct 3, 2018 at 20:49

answered Oct 3, 2018 at 20:43

JBeagle

2,6602 gold badges19 silver badges20 bronze badges

Collectives™ on Stack Overflow

What is the right way assign an array in Vue.js?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related