Computed not updating until calling commits from Vue Devtools

Hi all,

apologies if this has been asked before and if its something obvious im missing, but i have a very simple page with seperate components and a vuex store. component A has event that changes value in vuex store and component B uses this value to display on screen. I have vuex persist to save to local storage also.

anyway, the problem is that when i call method on component A it looks like it saves to the store, but it does not update computed property on component B. if i refresh the page it updates properly, so it looks like it has updated the store correctly. When i look in devtools, it has the commit happening, and if i click on the commit in the devtools it all starts working as it should. can someone please tell me what i am doing wrong.

So in devtools you can see the mutation being called with values

but it doesn’t update on the page until i click the commit button in devtools. once i do that i can run the page as many times as i like and it works fine, it just seems until i do this it will not refresh screen. using F5 to refresh page updates to the new values also so the store is deffo getting updated.

Store

import Vue from 'vue';
import Vuex from 'vuex';
import VuexPersist from 'vuex-persist';

Vue.use(Vuex);

const vueLocalStorage = new VuexPersist({
    key: "mmVuex",
    storage: window.localStorage
});

export default new Vuex.Store({
    state: {
        selectedHome: 'Home Name',
        selectedHomeId: 1
    },
    mutations: {
        CHANGE_HOME: (state, payload) => {
            state.selectedHome = payload.name
        }
    },
    actions: {},
    plugins: [vueLocalStorage.plugin]
});

Component A

...snip
    methods: {
        selectHome(id, name) {
            this.$store.commit('CHANGE_HOME', { id: id, name: name })
        }
    }

component B

    <hero-bar>
        {{ selectedHome }}
    </hero-bar>
    computed: {
        ...mapState(['selectedHome','selectedHomeId'])
    }

Thanks for any help on this.

Andy

On the surface it looks like it should be working. Have you tried removing VuexPersist from the equation?

try this.$nextTick
wish you work it

Hi, thanks for the replies. I tried removing vuex-persist and its the same behaviour.

Also, not sure where to use this.$nextTick, so tried it in selectHome method and same behaviour, and tried it in store mutation and that broke that one.

Is there some setting im missing as once i click the first commit, it all starts working perfectly, so is something set so that it is forcing it to wait until i do this? sorry my vue knowledge is newbie at best and am trying to learn, and typically get stuck at first hurdle.

cheers
andy

looking further, when i click commit and then change dropdown again (which runs fine) it is showing the following error in console

which is at the line

state.selectedHome = payload.name;

in my mutation??

Again apologies if i’ve missed something obvious but im at a loss.

andy

Hi, managed to find the issue. for anyone else that has similar it was because i had 2 instances of vue on the same page. i changed part into nav.vue template and imported into the other page then when it ran with just the 1 instance of vue all the errors went away and it works perfectly.

thanks for any responses. hopefully won’t make that mistake again.

cheers
andy