Vue3 / Vuex 改变商店状态不更新计算道具

Question

我在使用 Vue.js 3 和 Django 构建的电子商务网站上工作。目前面临购物车功能的一些问题。我想在不重新加载页面的情况下更新购物车内的商品数量，所以只更新购物车组件。为此，我设置了一个 Vue 应用程序，如下所示：

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

def get_cart_length(self): return sum(int(item['quantity']) for item in self.cart.values())

如果用户将商品添加到购物车，则获取函数为运行。如果我更新页面，一切正常，我得到正确的结果和正确的项目，所以这不是问题。我试图触发计算道具 numItems 将像这样更新的商店：（在 fetch 函数内）

...
.then((res) => {
   this.store.commit('increment', 1)
})
...

这会引发错误：Cannot read property 'commit' of undefined

如果我在添加项目后刷新页面，则会显示正确的数量，但我希望组件在不刷新页面的情况下更新。我尝试了但还没有找到解决方案。

Answer 1

像这样更改您的商店：

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 ...

并且调用你的突变你可以使用 store 没有 this 关键字（就像你计算的属性）

store.commit('increment', 1)

或使用此关键字：

this.$store.commit('increment', 1)

Vue3 / Vuex 改变商店状态不更新计算道具

Vue3 / Vuex changing store state doesn't update computed prop

python

django

fetch

vue.js

vuex