[英]Vue3 / Vuex changing store state doesn't update computed prop
I work on a ecommerce website build with Vue.js 3 and Django.我在使用 Vue.js 3 和 Django 构建的电子商务网站上工作。 Currently facing some issues with the cart functionality.
目前面临购物车功能的一些问题。 I want to update the amount of items inside the cart without reloading the page, so just updating the cart component.
我想在不重新加载页面的情况下更新购物车内的商品数量,所以只需更新购物车组件。 For this I set up a Vue app which looks like this:
为此,我设置了一个 Vue 应用程序,如下所示:
Vue.js Vue.js
<li class="nav-item" id="navbar-app">
<a class="nav-link" href="#">Cart ([[ numItems ]])</a>
</li>
...js
const store = {
state: {
numItems: {{ cart.get_cart_length }}
},
mutations: {
increment(state, quantity) {
console.log(quantity)
state.numItems += quantity
}
}
}
const Navbarapp = {
delimiters: ['[[', ']]'],
store: store,
computed: {
numItems() {
let cart_items = store.state.numItems
return cart_items
}
}
}
Vue.createApp(Navbarapp).use(store).mount('#navbar-app')
The get_cart_length function just queries the amount of items: cart.py
get_cart_length function 只是查询商品数量:cart.py
def get_cart_length(self): return sum(int(item['quantity']) for item in self.cart.values())
def get_cart_length(self): return sum(int(item['quantity']) for item in self.cart.values())
If a user adds an item to the cart a fetch function is running.如果用户将商品添加到购物车,则获取 function 正在运行。 Everything works fine if I update the page I get correct results and correct items so this is not the problem.
如果我更新页面,一切正常,我得到正确的结果和正确的项目,所以这不是问题。 I tried to trigger the store that the computed prop
numItems
will update like this: (inside the fetch function)我试图触发计算的道具
numItems
将像这样更新的商店:(在 fetch 函数内部)
...
.then((res) => {
this.store.commit('increment', 1)
})
...
this throws an error : Cannot read property 'commit' of undefined
这会引发错误:
Cannot read property 'commit' of undefined
if i refresh the page after adding an item the correct amount is displayed but i want the component to update without refreshing the page.如果我在添加项目后刷新页面,则会显示正确的数量,但我希望组件在不刷新页面的情况下更新。 i tried but haven't found a solution.
我试过但没有找到解决方案。
change your store like this:像这样更改您的商店:
const store = new Vuex.Store({ // this line changed ...
state: {
numItems: {{ cart.get_cart_length }}
},
mutations: {
increment(state, quantity) {
console.log(quantity)
state.numItems += quantity
}
}
}); // and this line changed ...
and for call your mutation you can use store
without this
keyword (like your computed property)并且为了调用你的突变,你可以使用
store
没有this
关键字(比如你的计算属性)
store.commit('increment', 1)
or with this keyword:或使用此关键字:
this.$store.commit('increment', 1)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.