Vue3+Vuex更新store状态时computed属性不更新且commit报错

• 你当前手写的store是普通JavaScript对象，并非经过Vuex/Pinia初始化的状态管理实例，本身不存在commit方法。
• Vue.use(store)的调用逻辑失效：Vue 3的use方法仅能接收合规的Vue插件实例，普通对象传入后不会完成全局状态注入，组件内根本无法通过上下文关联到这个对象。
• fetch回调的this指向错误：没有做上下文绑定的普通函数回调，this不会指向组件实例，自然读取不到store属性，触发Cannot read property 'commit' of undefined报错。
• 手写的普通对象没有接入Vue的响应式系统，哪怕手动改了numItems的值，视图也不会自动更新，必须依赖页面刷新拉取服务端数据。

适合当前仅需要更新导航栏购物车数量的简单场景，不需要引入额外状态管理库：

1. 用Vue 3内置的reactive方法把原有普通store对象改造为响应式对象，确保数据变更能触发视图更新：

   // 替换原来的普通store定义
   const store = Vue.reactive({
       state: {
           numItems: {{ cart.get_cart_length }}
       }
   })
   

2. 把原来伪store里的mutations逻辑抽成独立的全局可调用方法，因为响应式对象的属性可以直接修改，不需要模拟commit流程：

   function updateCartCount(quantity) {
       store.state.numItems += quantity
   }
   

3. 修正fetch请求的回调逻辑，去掉依赖this的错误写法，直接在回调里调用上面定义的全局更新方法，彻底规避this指向问题：

   .then((res) => {
      // 直接调用全局方法更新数量，不需要访问this
      updateCartCount(1)
   })
   

4. 修正Vue应用的挂载逻辑，删除无效的.use(store)调用（传入普通对象不会被识别为插件），保留原有自定义分隔符和computed逻辑即可：

   const Navbarapp = {
       delimiters: ['[[', ']]'],
       computed: {
           numItems() {
               // 直接引用模块作用域内的响应式store即可
               return store.state.numItems
           }
       }
   }
   // 删除原来无效的.use(store)
   Vue.createApp(Navbarapp).mount('#navbar-app')
   

如果后续购物车功能需要存储商品列表、价格、选中状态等更多数据，直接使用Vue官方配套的状态管理库（Vuex 4或Pinia）替代手写伪store：

• 按照官方规范初始化真正的store插件实例，定义对应的state和修改逻辑
• 初始化后把合规的插件实例传入app.use()完成全局注册
• 组件内可通过全局注入的store实例调用修改方法，所有依赖store数据的视图会自动完成增量更新，不需要刷新页面

注意：无论用哪种方案，都不要在非箭头函数的fetch回调中依赖this的上下文拿组件/store实例，直接引用模块作用域内定义的响应式对象/store实例，能从根源上避免this指向类的报错。

内容的提问来源于stack exchange，提问作者ViLuWi