Vuex $store properties not reactive when using computed property

Your code should work if you setup everything correctly: http://codepen.io/CodinCat/pen/RKZeZe?editors=1010

A very common mistake is that you didn't give your state initial data.

You should declare the state shape explicitly, so instead of

state: {}

// or

state: {
  nav: {}
}

do this:

state: {
  nav: {
    type: '...'
  },
  ...
}

or the properties will not be reactive, like this example: http://codepen.io/CodinCat/pen/ggxBEV?editors=1010

And make sure you did update the state, maybe the problem is just you didn't update the state correctly as you expected.

Actually, you need to use Vue.set() function to make the new property reactive.

changeType () {
   Vue.set(this.$store.state.nav, 'type', 'wide');
}

See this codepen: https://codepen.io/DedicatedManager/pen/JZgpaa

I did a whole screen capture video on this subject: youtu.be/8GHczab2Lbs

When adding new properties to an Object from your Vuex store, you should either use

Vue.set(obj, 'newProp', 123)

or replace that Object with a fresh one

state.obj = { ...state.obj, newProp: 123 }

From Vuex docs

Related