javascript - Vuex Mutation 正在运行，但组件在 vue 开发工具中手动提交之前不会更新

Question

我有一个 vue 组件，我无法从通过服务调用填充的计算属性进行更新。

Feed.vue

<template>
    <div class="animated fadeIn">
        <h1 v-if="!loading">Stats for {{ feed.name}}</h1>      
        <h2 v-if="loading">loading {{ feedID }}</h2> 
    </div>
</template>
<script>
    export default {
        data: () => {
            return {
                feedID: false
            }
        },
        computed: {
            feed(){
                return this.$store.state.feed.currentFeed
            },
            loading(){
                return this.$store.state.feed.status.loading;
            }
        },
        created: function(){    
            this.feedID = this.$route.params.id;
            var fid = this.$route.params.id;
            const { dispatch } = this.$store;
            dispatch('feed/getFeed', {fid});
        }
    }
</script>

从 feed 模块调度 'feed/getFeed'...

feed.module.js

import { feedStatsService } from '../_services';
import { router } from '../_helpers';

export const feed = {
    namespaced: true,
    actions: {
        getFeed({ dispatch, commit }, { fid }) {
            commit('FeedRequest', {fid});
            feedStatsService.getFeed(fid)
                .then(
                    feed => {
                        commit('FeedSuccess', feed);
                    },
                    error => {
                        commit('FeedFailure', error);
                        dispatch('alert/error', error, { root: true });
                    }
                )
        }
    },
    mutations: {
        FeedRequest(state, feed) {
            state.status = {loading: true};
            state.currentFeed = feed;
        },
        FeedSuccess(state, feed) {
            state.currentFeed = feed;
            state.status = {loading: false};
        },
        FeedFailure(state) {
            state.status = {};
            state.feed = null;
        }
    }
}

feedStatsService.getFeed 调用该服务，该服务仅运行提取并返回结果。然后 commit('FeedSuccess', feed) 被调用，它运行突变，设置 state.currentFeed=feed，并将 state.status.loading 设置为 false。

我可以看出它已存储，因为该对象显示在 Vue 开发工具中。 state.feed.currentFeed 是服务的结果。但是，我的组件不会改变以反射(reflect)这一点。并且在开发工具中也有一个突变的有效载荷。在开发工具中手动提交 feed/feedSuccess 时，我的组件会更新。

我在这里错过了什么？

Answer 1

与需要初始化组件 data 属性的方式相同，商店的状态也是如此。如果 Vue 不知道初始数据，则无法对更改使用react。

您似乎遗漏了类似...

state: {
  status: { loading: true },
  currentFeed: {}
}

---

另一种选择是使用 Vue.set。参见 https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules ...

Since a Vuex store's state is made reactive by Vue, when we mutate the state, Vue components observing the state will update automatically. This also means Vuex mutations are subject to the same reactivity caveats when working with plain Vue