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

我在这里缺少什么？

Answer 1

有时更新不直接处于状态的属性是问题

{
   directprop: "noProblem",
   indirectParent: {
      "test": 5 // this one has a problem but works if we clone the whole object  indirectParent
   }
}

但这是一个临时解决方案，它应该可以帮助您强制更新状态并发现真正的问题。

Answer 2

嘿，所有来到这里但无法找到解决方案的人。以下对我有用：

声明基本状态：

state: {
  mainNavData: [],
}

然后我的动作就是调用现在固定的突变：

actions : {
  async fetchMainNavData({ commit }) {
    var response = await axios.get();
    commit('setMainNavData', response));
  },
  
};

现在我的变异正在调用这个 updateState() 函数，它是 key 的全部

mutations = {
  setMainNavData(state, navData) {
    updateState(state, 'mainNavData', navData);
  },
};

这就是 updateState 函数正在做的事情，它解决了我的问题。

const updateState = (state, key, value) => {
  const newState = state;
  newState[key] = value;
};

添加 updateState() 后，我的数据反应性地显示在前端，我不再需要在 Vue 工具中手动提交数据。

请注意我的商店在不同的文件中，所以它有点不同。

希望这对其他人有所帮助！

Answer 3

与组件data 属性需要初始化的方式相同，您的商店状态也是如此。如果 Vue 不知道初始数据，它就无法对更改做出反应。

您似乎缺少...

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

---

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

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