vuex 저장소에서 구성 요소를 업데이트하지 않음

vuex 저장소에서 구성 요소를 업데이트하지 않음

제가 처음이라 아마 초보적인 실수를 하고 있는 것 같아요.

루트 vue 요소가 있습니다.raptor.js:

const Component = {
el: '#app',
store,
data: {
    productList: store.state.productlist
},
beforeCreate: function () {
    return store.dispatch('getProductList', 'getTrendingBrands');
},
updated: function (){
    console.log(111);
    startSlider();
}
};
const vm = new Vue(Component);

이 템플릿 사용

<div class="grid-module-single popular-products" id="app">
<div class="row">
    <div class="popular-items-slick col-xs-12">
        <div v-for="product in productList">
            ...
        </div>
    </div>
</div>

내 스토어는 매우 심플한 스토어/index.js:

import Vue from 'vue';
import Vuex from 'vuex';
import model from '../../utilities/model';

Vue.use(Vuex);

export default new Vuex.Store({
state: {
    productlist: []
},
mutations: {
    setProductList(state, data) {
        state.productlist = data;
    }
},
actions: {
    getProductList({ commit }, action) {
        return model.products().then(data => commit('setProductList', data));
    }
}
});

vuex devtool에서 스토어가 업데이트되고 있는 것을 알 수 있습니다.https://www.screencast.com/t/UGbw7JyHS3

컴포넌트가 업데이트되지 않습니다.https://www.screencast.com/t/KhXQrePEd

질문:.

devtools에서 내 코드가 작동하고 있음을 알 수 있습니다.스토어가 데이터로 업데이트되고 있습니다.그러나 내 컴포넌트는 업데이트되지 않습니다.컴포넌트의 데이터 속성에 이것을 추가하는 것만으로 충분하다고 생각했습니다.

data: {
    productList: store.state.productlist
}

데이터 오브젝트가 스토어와 자동으로 동기화되지 않는 것 같습니다.그래서 어딘가에서 완전히 vue no-no를 하거나 코드를 약간 수정해야 합니다.어쨌든 누구든지 나를 올바른 방향으로 도울 수 있다.

정말 감사해요.

갱신하다

내가 직접 알아냈어컴포넌트 데이터 부분을 계산된 방법으로 대체해야 했습니다.

데이터:

data: {
  productList: store.state.productlist
}

로 대체해 주세요.

computed: {
    productList () {
        return store.state.productlist;
    }
},

데이터는 렌더링 전에 컴포넌트에서 한 번만 작동하므로 대신 계산 기능을 사용할 수 있습니다.위의 답변과 같거나 mapstate를 사용할 수 있습니다.

import {mapState} from 'vuex'
...
computed: mapState({
  productList: state => state.productList
})             

첫 번째 - getter를 사용하여 이 작업을 수행합니다.mapGetters또한 이 속성을 감시해야 합니다.스토어 구독을 설정하거나 watch 메서드 tro 컴포넌트만으로 감시할 수 있습니다.

 this.$store.subscribe((mutation, state) => {    
   if (mutation.type === 'UPDATE_DATA') {
      ...
   }
 }

잘못된 방법으로 스토어를 productList 데이터 속성에 호출하고 있습니다.

사용하실 수 있습니다.

data: {
  productList: $store.state.productlist
}

그렇지 않으면 저장소를 사용하는 각 구성 요소의 저장소를 가져와야 합니다.

언급URL : https://stackoverflow.com/questions/42192855/vuex-store-doesnt-update-component