vuex商店不更新组件

Question

我是vue的新手,所以我可能会犯一个菜鸟错误.

我有一个root 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>

我的商店很简单store/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

题:

我可以从开发工具中看到,我的代码正在运行.商店正在更新数据.但是,我的组件未更新.我认为只需在组件的data属性中添加它就足够了:

data: {
    productList: store.state.productlist
}

但显然数据对象似乎没有自动与商店同步.所以我要么在某个地方做一个完整的vue,要么我需要稍微调整一下代码.无论如何,任何人都可以帮助我朝正确的方向.

非常感谢.

Answer 1

UPDATE

自己搞清楚了.只需用计算方法替换组件数据部分:

数据:

data: {
  productList: store.state.productlist
}

并替换它.

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

Answer 2

数据在渲染之前仅在组件上工作一次，因此您可以使用计算代替。就像上面的答案一样，或者你可以使用mapstate

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