Vuex не обновляет вычисляемое свойство Vue

Question

Я пытаюсь использовать vuex как слой между firestore и моим приложением vue. Мой магазин Vuex выглядит так:

const store = new Vuex.Store({
    state: {
        posts: [],
    },

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

    actions: {
        async load_post(context, id) {
            let post = await db
                .collection('posts')
                .where('post_id', '==', id)
                .get();
            post = post.docs[0]; 

            post = {id, ...post.data()};
            context.commit('add_post', post);
        },
    }
});

И внутри моего компонента Vue:

export default {
    name: 'Post',
    beforeMount() {
        const id = this.$route.params.id;
        this.$store.dispatch('load_post', id);
    },
    data() {
        return {
            id: this.$route.params.id
        };
    },
    computed: {
        content() {
            return this.$store.state.posts[this.id];
        }
    }
};

Теперь при навигации по сайту код работает нормально. Однако если я обновлю страницу, свойство содержимого станет неопределенным. После некоторой отладки я пришел к выводу, что он пытается читать из хранилища во время загрузки (поэтому он не определен), но когда хранилище готово, ничего не обновляется. До сих пор я пробовал наблюдатели, mapState vuex, кажется, ничего не работает ... какие-либо предложения?

Answer 1

Vue не может обнаружить изменение вложенного свойства, которое не установлено в состоянии при загрузке. Попробуйте изменить свою мутацию на это:

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';

Answer 2

Это проблема реактивности Vue. Вы должны изменить state.posts в vuex, чтобы сделать компонент реактивным. Mutate state.posts[post.id] только не сделает компонент реактивным, потому что state.posts все еще указывает на старую ссылку.

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

или вы можете использовать JSON.parse (JSON.stringify ())

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