I have a list in the vuex store with tables[t1,t2], when t1 updates i have to mutate the tables array in order to have the t1 updates.
For each table i use a <Table v-for="(item, index) in tables" :key="index" :data="item"> where it uses a Table.vue. In Table.Vue i have:
props: {
data: {
type: Object,
default: null
}
},
But when t1 changes it also forces an update to t2, which is understandable because the whole "tables" variable in store gets mutated. But I only want the component to update when there is an actual change in props, so that the t2 doesn't get updated unnecessarily. I've tried to look into memoization, which i used previously in React-projects to fix this problem. I didn't really find anything easy to use and searching "memoization vuejs" didn't really give me alot to go on.
What i do in the mutation in vuex store in order to mutate a table:
my_mutation(state, data) {
let newList = [...state.tables];
let index = newList.findIndex(i => i.tableName === data.tableName);
if (index !== -1) {
newList[index] = data.value;
}
Vue.set(state, 'currentViews', newList);
}
as you can see this code only mutate 1 element at the time in the state.tables, but sets the whole tables variable. This causes the update() function to trigger in the components (notice not created() as this only happens initally when i fetch and populate the tables variable) and rerenders the component.
Since the created() is not triggered when the mutation happens, this tells me that the component is still there and doesn't need to be recreated. The goal here is not to trigger updated() when theres no changes to the props and prevent rerendering of that particular component.
Update: I have another component inside Table.vue which was dependent on a store variable which was mutated when changing t1 causing the rest of the tables to change. Tip of the day: check if all the nested component isnt dependent on some store variable effected by the change