vuexストアはコンポーネントを更新しません

Question

私はvueの新機能ですので、新人のエラーになっている可能性があります。

私はルートVUE要素を持っている - raptor.js：

私の店は非常に単純な店/ index.jsでこのテンプレート

<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> 

を使用して

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); 

：

を

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 devt 001、私は店がhttps://www.screencast.com/t/UGbw7JyHS3

を更新されているが、私のコンポーネントが更新されていないこと、見ることができます。 https://www.screencast.com/t/KhXQrePEd

質問：

私は、デベロッパーツールから見ることができ、私のコードは働いている。ストアはデータで更新されています。しかし、私のコンポーネントは更新されていません。

data: { 
    productList: store.state.productlist 
} 

どうやらデータオブジェクトは、自動的にストアと同期されていないようです：私はちょうどコンポーネントのデータプロパティでこれを追加するために、それは十分だと思いました。だから私は完全なvue no-noをどこかでやっているか、コードを少し微調整する必要がある。とにかく誰もが正しい方向に私を助けることができます。

ありがとうございます。

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 
})