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商店不更新组件

回答

相关问题