Vuex 변환이 실행 중이지만 vue dev 도구에서 수동으로 커밋될 때까지 구성 요소가 업데이트되지 않음

Vuex 변환이 실행 중이지만 vue dev 도구에서 수동으로 커밋될 때까지 구성 요소가 업데이트되지 않음

서비스 호출에서 채워진 계산된 속성에서 업데이트할 수 없는 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/get'을 디스패치한다.공급 모듈에서 공급'...

feed.disc.disc.disc.disc

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는 서비스를 호출하고 서비스를 호출하면 가져오기만 실행되며 결과가 반환됩니다.그런 다음 커밋('FeedSuccess', 피드)이 호출되며, 변환이 실행되어 state.currentFeed=피드가 설정되고 state.status.loading이 false로 설정됩니다.

개체가 Vue dev tools.state.feed.currentFeed에 나타나기 때문에 저장되어 있음을 알 수 있습니다.하지만 내 부품은 그것을 반영하기 위해 변경되지 않습니다.개발 도구의 돌연변이에도 payload가 있습니다.개발 도구에서 피드/피드성공을 수동으로 커밋하면 구성 요소가 업데이트됩니다.

내가 뭘 놓쳤지?

이 컴포넌트가data속성을 초기화해야 합니다.또한 스토어 상태도 초기화해야 합니다.Vue는 초기 데이터를 모르는 경우 변경 사항에 대응할 수 없습니다.

뭔가 놓치고 있는 것 같은데...

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

---

또 다른 옵션은Vue.sethttps://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules 를 참조해 주세요.

Vue에 의해 Vue 스토어 상태가 비활성화되므로 상태를 변환하면 상태를 감시하는 Vue 컴포넌트가 자동으로 업데이트됩니다.이는 또한 Vuex 돌연변이가 일반 Vue를 사용할 때 동일한 반응성 경고를 받는다는 것을 의미합니다.

이 자리에 와도 해결책을 찾지 못한 사람들을 위해.다음은 나에게 효과가 있었다.

기본 상태를 선언하는 중:

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 툴에서 데이터를 수동으로 커밋할 필요가 없어졌습니다.

please note my store is in a different file, so its a little bit different.

이것이 다른 사람들에게 도움이 되길 바랍니다!

직접 상태가 아닌 속성을 업데이트하는 것이 문제가 될 수 있습니다.

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

일시적인 해결책이기 때문에 상태를 강제로 업데이트하고 무엇이 진짜 문제인지 알아내는 데 도움이 될 것입니다.

언급URL : https://stackoverflow.com/questions/52865612/vuex-mutation-running-but-component-not-updating-until-manual-commit-in-vue-dev