Vuex store update is not reactive when used with computed

I have a Vuex Store defined in my application.when I am updating data through actions it is updating values fine in Store but computed property is not updating when store gets updated.I have added Vue.set in my code after searching about similar issues but still it is not solving my problem

//Define Store


 	const store = new Vuex.Store({
   		state: {
   		     summaryForm: {
   		        readOnlyWidgets : [],
   		       itemList:r2f.summaryItems
   		      }
   		  },
   		 getters: {
   			getSummaryForm: state => state.summaryForm,
// This is my getter function
   			itemList: state => {
   						    return state.summaryForm.itemList;
   						},
   		  },
   		 actions: {
   			UPDATE_ITEMS: function({ commit }, items) {
   			  commit("UPDATE_ITEMS_MUTATION", items);
   			}  
   		 },
   		 mutations: {
  					 determineFormState: function(state){   					   					       				
   				 },
   				 UPDATE_ITEMS_MUTATION(state, items) {
   				 if (state.summaryForm.itemList != undefined){
   			            for(var i=0;i<items.length;i++){
   			        	   Vue.set(state.summaryForm.itemList,i, items[i]);
   			        	}
   			      } 
   			      else{
   			             Vue.set(state.summaryForm, 'itemList', items);
   		            } 
   					
   				 }

   		      }
   		});


Followings i my computed property whcih is not getting updated. Store gets updated perfectly but this computed property still shows old values.

     computed: {
       		pItemList: function(){
        			return this.$store.getters.itemList;
        		  }	
       	  },              
// Thats how I am calling update
  	this.$store.dispatch('UPDATE_ITEMS', items);

Have you tried to use mapGetters from vuex to bind the store getters with your component?

Hi,
I was able to fix the issue by setting it to empty object before setting the actual value.

Vue.set(state.summaryForm.itemList,i, {})
Vue.set(state.summaryForm.itemList,i, items[i]);

Thanks

1 Like