状态更改后重新加载组件vue.js
我正在使用NuxtJS和VueJS。在状态更改后,我遇到一个组件无法重新渲染的问题 index.js文件状态更改后重新加载组件vue.js,vue.js,nuxt.js,server-side-rendering,Vue.js,Nuxt.js,Server Side Rendering,我正在使用NuxtJS和VueJS。在状态更改后,我遇到一个组件无法重新渲染的问题 index.js文件 Vue.use(Vuex) const state = { productsHome: [], accessToken: {}, collections: {}, product: {}, cart: {}, } const getters = { productForHomepage (state) { return state.productsHome
Vue.use(Vuex)
const state = {
productsHome: [],
accessToken: {},
collections: {},
product: {},
cart: {},
}
const getters = {
productForHomepage (state) {
return state.productsHome
},
productForPdp (state) {
return state.product
},
cart (state){
return state.cart
}
}
const actions = {
nuxtServerInit (context) {
//good place to set language
},
GET_HOME(){
api.getHomepageProducts().then(response => {
this.commit('setHomeProducts', response.data)
})
},
GET_PDP(sth){
api.findBySlug(this.app.router.history.current.params.slug).then(response => {
this.commit('setPDPData', response.data)
})
},
ADD_TO_CART(store, id){
api.addToCart(id).then(res => {
store.commit('updateCart', res.data)
})
}
}
const mutations = {
setHomeProducts(state, data){
state.productsHome = data
},
setPDPData(state, data){
state.product = data[0]
},
updateCart(state, data){
for (var optbox of data) {
state.cart[optbox.id] = optbox;
}
// state.cart.set('iteams', 'count', 1)
}
}
const createStore = () => {
return new Vuex.Store({
state,
getters,
mutations,
actions
});
}
export default createStore;
这是组件
<template>
<div>
<div class="content">
<p>
This is cart
</p>
{{ cart }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
cart: this.$store.state.cart
}
},
watch: {
cart: function(val){
cart = this.$store.state.cart
}
},
methods: {
updateCart: function(){
console.log(this)
}
}
}
</script>
这是购物车
{{cart}}
导出默认值{
数据(){
返回{
购物车:这个。$store.state.cart
}
},
观察:{
购物车:功能(val){
购物车=此。$store.state.cart
}
},
方法:{
updateCart:function(){
console.log(这个)
}
}
}
执行此操作时:
data() {
return {
cart: this.$store.state.cart
}
}
您使用购物车状态的值初始化数据,但当购物车状态更改时,数据不会一直更改,这是一次性交易,如中所示
您实际要做的是使用计算出的:
computed: {
cart(){
return this.$store.state.cart
}
}
现在,每当购物车状态在商店中发生变化时,组件中购物车的价值也会发生变化
下面是JSFIDLE:您还没有说明问题是什么。问题已经澄清。