Vuex Mutation正在运行，但组件不会更新，直到在vue dev工具中手动提交

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是服务的结果。但是，我的组件并没有改变以反映这一点。而且在dev工具中的突变下也有一个有效载荷。在开发工具中手动提交feed / feedSuccess时，我的组件会更新。

我在这里想念什么？

Answer 1

就像data需要初始化组件属性一样，商店的状态也需要初始化。如果Vue不了解初始数据，则无法对更改做出反应。

您似乎遗漏了类似...

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

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

由于Vue使Vuex存储的状态具有反应性，因此当我们更改状态时，观察状态的Vue组件将自动更新。这也意味着在使用普通Vue时，Vuex突变会受到相同的反应性警告