[Vuejs]-Vuex doen't update Vue computed property

by

0👍

✅

Vue cannot detect a change on a nested property, which is not set in state on load. Try changing your mutation to this:

add_post(state, post) {
   Vue.set(state.posts, post.id, post);
}

// You need to import Vue at the top of your store file, when using the Vue.set() method
import Vue from 'vue';

0👍

It’s Vue reactivity problem. You should modify state.posts in vuex to make component reactive. Mutate state.posts[post.id] only will not make component reactive, because state.posts still point to old reference.

mutations: {
  add_post(state, post) {
      state.posts = {
        ...state.posts,
        [post.id]: post
      }
  },
},

or you can use JSON.parse(JSON.stringify())

add_post(state, post) {
  state.posts[post.id] = post;
  state.posts = JSON.parse(JSON.stringify(state.posts))
},

Leave a comment