[Vuejs]-Vuex commit succeed but the ui or view only change when refresh browser (not reactive)

by

0👍

I think it is better to use Vue.set() for changing the commentData.
It could be the reactivity caveat => https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Just a little interested, you intialize commentData as an object but is it? Maybe it’s better to initialize it as an array 🙂

It’s also maybe nice to use async/await.

I would do the following:

import Vue from 'vue';

const store = createStore({
  namespaced: true,

  state: {
    token: null,
    refreshToken: null,
    userid: '',
    exp: '',
    userData: '',
    postData: '',
    singlePostData: '',
    commentData: {}
  },

  mutations: {
    postComment (state, { commentData }) {
      // better to use Vue.set()
      Vue.set(state, 'commentData', commentData);
    }
  },

  actions: {
    async addComment ({ commit }, usercredentials) {

      const response = await getAPI.post(`/post/${usercredentials.id}/comments`, {
        name: usercredentials.name,
        comment: usercredentials.comment
      });

      commit('postComment', response.data);
    }
  }
}
);

Leave a comment