Nuxt Composition API更新state不响应UI及product为undefined问题

1. 解决product为undefined问题 #

核心原因有两个：

• 代码中使用了ref(false)但未导入ref依赖，运行时直接报错导致变量初始化失败
• 直接用reactive包装getter返回值，相当于仅拷贝了初始化时刻的静态值，若初始化时store中无对应商品数据，后续store更新也无法同步到组件内的product变量
  修复步骤：

1. 补全缺失的依赖导入

import {
  defineComponent,
  useFetch,
  useStore,
  useRoute,
  ref, // 补全ref导入
  computed, // 新增computed导入用于响应式绑定getter
  watch
} from '@nuxtjs/composition-api'

2. 把product改为响应式计算属性，自动同步store更新，同时加空值兜底

// 替换原来的reactive定义行
const product = computed(() => store.getters['products/loaded'](route.value.params.id) || {})

3. 可选优化Vuex的getter逻辑，避免不必要的try catch，更稳妥地处理空值

loaded: state => id => {
  if (!state.loaded) return {}
  return id ? state.loaded[id] || {} : state.loaded
}

2. 解决评论/评分更新后UI不同步问题 #

上述把product改为computed包装后，只要Vuex的mutation按照响应式规则修改state.loaded[id]的评分、评论字段，computed会自动感知store变化更新数据，UI会同步刷新，无需额外处理。

• 移除手动维护的loading变量，直接使用useFetch自带的加载状态，减少冗余代码

const { fetch, fetchState } = useFetch(async () => {
  await store.dispatch('products/getOne', route.value.params.id)
})
// 模板中直接用`fetchState.loading`判断加载状态即可

• 优化watch监听逻辑，仅监听路由的商品id参数，减少不必要的触发次数

watch(() => route.value.params.id, (newId) => {
  if (newId) fetch()
})

• 模板增加加载态和空态判断，提升用户体验

<template>
  <div v-if="fetchState.loading">商品加载中...</div>
  <div v-else-if="Object.keys(product).length === 0">未找到对应商品</div>
  <div v-else>
    <!-- 商品渲染逻辑，评分直接取product.rating即可自动更新 -->
    {{ product }}
  </div>
</template>

• 长期适配Nuxt3可考虑将Vuex替换为Pinia，对Composition API的适配性更好，类型支持也更完善。

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