Python Vue3/Vuex更改存储状态不会'；更新计算道具

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

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

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')

这会引发错误：

无法读取未定义的属性“commit”

---

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

像这样更改您的店铺：

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

关键字（如您的计算属性）

或使用此关键字：

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

---

我尝试了这个，现在我得到了错误“Vue.mixin不是一个函数”。我导入了vuex.js版本3.6.2和vue.global.min.js版本3.0.11您不能将

Vuex3

用于

Vue3

您应该将

vuex4

用于

Vue3

：哦，好的，我不知道。现在你的解决方案奏效了：）谢谢你的帮助！

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