Vuex Mutation running, but component not updating until manual commit in vue dev tools

Question

I have a vue component that I can't get to update from a computed property that is populated from a service call.

Feed.vue

<template>
    <div class="animated fadeIn">
        <h1 v-if="!loading">Stats for {{ feed.name}}</h1>      
        <h2 v-if="loading">loading {{ feedID }}</h2> 
    </div>
</template>
<script>
    export default {
        data: () => {
            return {
                feedID: false
            }
        },
        computed: {
            feed(){
                return this.$store.state.feed.currentFeed
            },
            loading(){
                return this.$store.state.feed.status.loading;
            }
        },
        created: function(){    
            this.feedID = this.$route.params.id;
            var fid = this.$route.params.id;
            const { dispatch } = this.$store;
            dispatch('feed/getFeed', {fid});
        }
    }
</script>

That dispatches 'feed/getFeed' from the feed module...

feed.module.js

import { feedStatsService } from '../_services';
import { router } from '../_helpers';

export const feed = {
    namespaced: true,
    actions: {
        getFeed({ dispatch, commit }, { fid }) {
            commit('FeedRequest', {fid});
            feedStatsService.getFeed(fid)
                .then(
                    feed => {
                        commit('FeedSuccess', feed);
                    },
                    error => {
                        commit('FeedFailure', error);
                        dispatch('alert/error', error, { root: true });
                    }
                )
        }
    },
    mutations: {
        FeedRequest(state, feed) {
            state.status = {loading: true};
            state.currentFeed = feed;
        },
        FeedSuccess(state, feed) {
            state.currentFeed = feed;
            state.status = {loading: false};
        },
        FeedFailure(state) {
            state.status = {};
            state.feed = null;
        }
    }
}

The feedStatsService.getFeed calls the service, which just runs a fetch and returns the results. Then commit('FeedSuccess', feed) gets called, which runs the mutation, which sets state.currentFeed=feed, and sets state.status.loading to false.

I can tell that it's stored, because the object shows up in the Vue dev tools. state.feed.currentFeed is the result from the service. But, my component doesn't change to reflect that. And there is a payload under mutations in the dev tool as well. When manually commit feed/feedSuccess in the dev tools, my component updates.

What am I missing here?

It’s worth mentioning, you might want to look into Vuex Getters. With a getter, you can just map the getters as needed into your components instead of accessing state directly from a computed property. — , Oct 31 '18 at 04:34

Phil · Accepted Answer · 2018-10-31T03:23:48.627

9

In the same way that component data properties need to be initialised, so too does your store's state. Vue cannot react to changes if it does not know about the initial data.

You appear to be missing something like...

state: {
  status: { loading: true },
  currentFeed: {}
}

Another option is to use Vue.set. See https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules...

Since a Vuex store's state is made reactive by Vue, when we mutate the state, Vue components observing the state will update automatically. This also means Vuex mutations are subject to the same reactivity caveats when working with plain Vue

edited Oct 31 '18 at 03:23

answered Oct 18 '18 at 01:26

Phil

157,677
23
242
245

Nice! I've been beating my head against a wall for two days! Thank you @Phil! – mad Oct 18 '18 at 01:45
1

Thank you so much! I couldnt figure it out and then from your comment, I realized I was trying to update a property on an object where the property didn't exist to begin with. The property was being added and changed by the mutation, but the reactivity did not work. – Kevin Rutledge Nov 10 '20 at 23:41

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Hey for all the people coming to this and not being able to find a solution. The following was what worked for me:

Declaring base state:

state: {
  mainNavData: [],
}

Then I had my action which is calling the now fixed mutation:

actions : {
  async fetchMainNavData({ commit }) {
    var response = await axios.get();
    commit('setMainNavData', response));
  },
  
};

Now my mutation is calling this updateState() function which is key to it all

mutations = {
  setMainNavData(state, navData) {
    updateState(state, 'mainNavData', navData);
  },
};

This is what the updateState function is doing which solved my issues.

const updateState = (state, key, value) => {
  const newState = state;
  newState[key] = value;
};

After adding updateState() my data reactively showed up in the frontend and I didn't have to manually commit the data in Vue tools anymore.

please note my store is in a different file, so its a little bit different.

Hope this helps others!

score 0 · Answer 3 · answered Jul 02 '20 at 09:41

Sometimes updating property that are not directly in the state is the problem

{
   directprop: "noProblem",
   indirectParent: {
      "test": 5 // this one has a problem but works if we clone the whole object  indirectParent
   }
}

but it is a temporary solution, it should help you to force update the state and discover what is the real problem.

Vuex Mutation running, but component not updating until manual commit in vue dev tools

3 Answers3

Linked