[英]vuex store doesn't update component
I'm new to vue, so I'm probably making a rookie error.我是 vue 的新手,所以我可能犯了一个新手错误。
I have a root vue element - raptor.js:我有一个根 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);
Using this template使用这个模板
<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>
My store is very simple store/index.js:我的商店非常简单 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));
}
}
});
In my vuex devtool, I can see, that the store is being updated https://www.screencast.com/t/UGbw7JyHS3在我的 vuex devtool 中,我可以看到商店正在更新https://www.screencast.com/t/UGbw7JyHS3
but my component is not being updated: https://www.screencast.com/t/KhXQrePEd但我的组件没有更新: https://www.screencast.com/t/KhXQrePEd
Question:问题:
I can see from the devtools, that my code is working.我可以从开发工具中看到,我的代码正在运行。 The store is being updated with data.
商店正在更新数据。 My component is not being updated,however.
但是,我的组件没有更新。 I thought it was enough just to add this in the data property on the component:
我认为只需将其添加到组件的数据属性中就足够了:
data: {
productList: store.state.productlist
}
but apparently the data object doesn't seem to be automatically synced with the store.但显然数据 object 似乎没有自动与商店同步。 So either I'm doing a complete vue no-no somewhere, or I need to tweak the code a bit.
所以要么我在某个地方做一个完整的 vue 禁忌,要么我需要稍微调整一下代码。 Anyway can anyone help me in the right direction.
无论如何,任何人都可以帮助我朝着正确的方向前进。
Thanks a lot.多谢。
UPDATE更新
Figured it out myself.我自己想出来了。 Just had to replace the components data part with a computed method:
只需用计算方法替换组件数据部分:
data:数据:
data: {
productList: store.state.productlist
}
and replace it with.并将其替换为。
computed: {
productList () {
return store.state.productlist;
}
},
data only work once on component before render, so you can use computed instead. data 在渲染之前只在组件上工作一次,所以你可以使用 computed 代替。 like above answer, or you can use mapstate
像上面的答案,或者你可以使用 mapstate
import {mapState} from 'vuex'
...
computed: mapState({
productList: state => state.productList
})
First - use getter to do this mapGetters
, also you need to watch this property somehow, you can set store subscription or just with watch method trough component.首先 - 使用 getter 来执行此
mapGetters
,您还需要以某种方式监视此属性,您可以设置商店订阅或仅使用 watch 方法通过组件。
this.$store.subscribe((mutation, state) => {
if (mutation.type === 'UPDATE_DATA') {
...
}
}
for composition api with script setup对于带有脚本设置的组合 api
const productList= computed(()=>store.state.productlist) const productList= computed(()=>store.state.productlist)
You are calling the store into the productList data property in the wrong way.您以错误的方式将商店调用到 productList 数据属性中。
You can try it:你可以试试:
data: {
productList: $store.state.productlist
}
Otherwise you have to import store in each component that are using the store.否则,您必须在使用商店的每个组件中导入商店。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.