Мутация Vuex запущена, но компонент не обновляется до ручной фиксации в инструментах 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 / 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...

Так как состояние хранилища Vuex становится реактивным с помощью Vue, когда мы изменяем состояние, компоненты Vue, наблюдающие состояние, обновляются автоматически.Это также означает, что мутации Vuex подвергаются тем же предостережениям реактивности при работе с простым Vue