Vuex: Component does not update binding when state changes

Created on 6 Apr 2016 · 10Comments · Source: vuejs/vuex

My component is not updating its binding to a getter when the state is changed.

export default {
     vuex: {
            getters: {
                products: function (state) {
                    return state.event.data
                }
            },
            actions: {
                getEvent
            }
        },

In the template I have a binding to update products like so

<template>
   {{ products }}
   <button v-on:click="triggerIt">Trigger</button>
</template>

Here is my store:

const state = {
    data: []
};

const mutations = {
    [GET_EVENT_DATA] (state, event) {
        state.data = event;
    }
}

I checked dev tools and I see that the store gets updated correctly and so does the component's vuex getter. However, its not being reflected in the {{ products }} binding.

Source

TomKita

Most helpful comment

Use computed instead data directly.

instead:

data() { data: store.state.data }

use:

computed: { data() { return store.state.data } }

then use like {{ data }}

NickBefore on 18 Jul 2017

👍9 ❤1

All 10 comments

You code sample has multiple obvious problems. Please provide actual code that runs.

yyx990803 on 6 Apr 2016

These are small snippets of each file do you want the full source?

TomKita on 6 Apr 2016

vuex is available on CDN: http://www.jsdelivr.com/?query=vuex

You can use jsfiddle to create a reproduction.

yyx990803 on 6 Apr 2016

I think I found the issue the http://vuejs.github.io/vuex/en/data-flow.html documentation shows the store being setup like so:

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Then its imported to

// We are importing and injecting the store here because
// this is the root. In larger apps you only do this once.
import store from './store'
import { increment, decrement } from './actions'

const app = new Vue({
  el: '#app',
  store,

I assume when using Vue.use(Vuex) it references another vue instance. This caused my bindings not to update correctly. Like I said the component getter would update but the actual value on the page would not. When I removed Vue.use(Vuex) it was working again.

TomKita on 6 Apr 2016

Looks like you are installing multiple times. I've added a warning in the next release.

yyx990803 on 6 Apr 2016

I think you should update the documentation as well.

TomKita on 6 Apr 2016

What is the solution to this problem?

shangab on 18 Jul 2017

Use computed instead data directly.

instead:

data() { data: store.state.data }

use:

computed: { data() { return store.state.data } }

then use like {{ data }}

NickBefore on 18 Jul 2017

👍9 ❤1

@yyx990803, is there some timeout between triggering computed properties updating in Vuex. I have this action code:

function toggleSidebar() {
    store.commit('setSidebarActive', false);
    store.commit('setSidebarActive', true); // adding setTimeout(500) before that solves problem
}

In vue dev tools I see two commits, as expected. But my test $watch handler in the component fires only once:

public created() {
    this.$store.watch(() => this.$store.getters['isSidebarActive'], (value) => {
        console.log('state changed to', value);
    });
}