vuex商店不更新組件

我是vue的新手，所以我可能正在創造一個菜鳥錯誤。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 devt OOL，我可以看到，這家店被更新 https://www.screencast.com/t/UGbw7JyHS3

，但我的組件沒有被更新： https://www.screencast.com/t/KhXQrePEd

問：

我可以從devtools看到，我的代碼工作中。該商店正在更新數據。然而，我的組件沒有被更新。我認爲這是濫竽充數的數據屬性添加這個組件：

data: { 
    productList: store.state.productlist 
}

但顯然數據對象似乎不與商店自動同步。因此，無論我在哪裏做一個完整的vue，或者我需要調整一下代碼。無論如何，任何人都可以幫助我走向正確的方向。

非常感謝。

來源

2017-02-12 Martin Kure

UPDATE

想通了自己。剛剛與一個計算方法來替代的組件的數據部分：

數據：

data: { 
    productList: store.state.productlist 
}

，並取代它。

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

來源

2017-02-12 21:39:57

是這樣記錄？ – user2976753

是的，我在文檔中找到了解決方案：https：//vuex.vuejs.org/en/state.html –

是否有必要更換它？或者我們可以同時保留'數據'和'計算' –

數據只在渲染前在組件上工作一次，因此您可以使用計算代替。像上面的答案，或者您可以使用mapstate

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

來源

2017-07-27 02:11:30 masongzhi

現在它是'mapState'大寫S. – user1502723

vuex商店不更新組件

回答

相關問題