[英]Computed property in Vue not calculating
我有一个内置在 Vue 中的电子商务应用程序 (SPA),下面是商店的快照
state: {
cart: [],
totalItems: {
count: 0
}
},
getters: {
totalItems(){
if(window.localStorage.totalItems){
return JSON.parse(window.localStorage.totalItems)
}
else{
let totalItems = { count: 0}
return totalItems
}
}
},
mutations: {
setCart(state, cart){
state.cart = cart
window.localStorage.cart = JSON.stringify(cart)
},
setTotalItems(state, totalItems){
state.totalItems = totalItems
window.localStorage.totalItems = JSON.stringify(totalItems)
}
},
actions: {
addToCart({ commit, getters }, productId){
let cart = getters.cart
let totalItems = getters.totalItems
if(cart.length == 0){
cart.push({id: productId, quantity: 1})
totalItems.count++
}
else if(cart.find(({ id }) => id == productId)){
let item = cart.find(({ id }) => id == productId)
item.quantity++
totalItems.count++
}
else{
cart.push({id: productId, quantity: 1})
totalItems.count++
}
commit('setCart', cart)
commit('setTotalItems', totalItems)
},
setTotalItems({ commit }, totalItems){
commit('setTotalItems', totalItems)
}
}
在我的 App.vue 文件中如下 -
<template>
<v-app>
<v-app-bar
app
color="red"
dark
>
<v-btn text to="/">Vue Shop</v-btn>
<v-spacer></v-spacer>
<v-btn text to="/cart">
<v-badge v-if="totalItems.count" :content="totalItems.count"><v-icon>mdi-cart</v-icon></v-badge>
</v-btn>
</v-app-bar>
<v-main>
<router-view></router-view>
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
components: {
},
computed: {
totalItems(){
return this.$store.getters.totalItems
}
}
};
</script>
当我加载站点时,我可以看到计算的属性正在计算。 但是,当我单击下面显示的 Home.vue 文件上的“添加到”按钮时,它应该
我面临的问题是,当我单击“添加到”按钮时,我可以看到 localStorage 中的 totalItems 的值已更新,但它并未反映在 v-app-bar 组件中。 只有当我导航到不同的页面然后返回主页时才会这样做。
当我通过将值存储在 state 而不是 localStorage 来实现时,它会正确反映,而无需导航到其他页面。
有没有办法在仍然使用 localStorage 而不是商店的同时实现这一点
<template>
<v-container>
<v-row>
<v-col v-for="product in products" :key="product.id">
<v-card width="300" height="300">
<v-img :src=product.imgUrl width="300" height="200"></v-img>
<v-card-title>
{{ product.name }}
</v-card-title>
<v-card-text>
${{ product.price }}
<v-btn small class="ml-16 primary" @click="addToCart(product.id)">Add to <v-icon>mdi-cart</v-icon></v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'Home',
components: {
},
computed: {
products(){
return this.$store.getters.products
},
cart(){
return this.$store.getters.cart
}
},
methods: {
addToCart(id){
this.$store.dispatch('addToCart', id)
}
}
}
</script>
问题本地存储不是反应式的,因此您的吸气剂永远不会重新评估。
解决方案如果 state 尚未初始化,您可以重写您的 getter,使其仅从本地存储中检索值。 随后的调用应直接访问 state,因为您正在更改您的 mutators 并且这将触发您的 getter 的重新评估,因此您的计算属性:
getters: {
totalItems(state){
if(state.totalItems.count < 0){
return JSON.parse(window.localStorage.totalItems || '{count: 0}')
}
return state.totalItems;
}
},
然后,您可以使用-1
初始化您的count
,因此对 getter 的第一次评估将查看本地存储。
通过在 getter 中引用totalItems
属性,vue 知道在该属性更改时重新评估该 getter。
这里的缺点是,您的吸气剂和您的 state 在第一次更改计数之前不会同步。
您可能还可以通过调用 localStorage 来初始化 state,并将其从 getter 中删除。
state: {
totalItems: {
count: JSON.parse(window.localStorage.totalItems || '{count: 0}')
}
},
getters: {
totalItems(state){
return state.totalItems;
}
},
好处:您的 state 和吸气剂是同步的,但这也使您的吸气剂变得多余。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.