Vuex深层嵌套数组引发computed计算属性响应性丢失问题

1. 先检查计算属性的依赖引用方式 #

得确保isFeaturedToggleDisabled直接关联Vuex里的featuredItems，别用解构或者中间变量打断响应链：

// 踩坑示例：解构后丢失响应性
const { featuredItems } = useStore().state.media
const isFeaturedToggleDisabled = computed(() => {
  return featuredItems.length >= 5
})

// 正确写法：直接引用store内的响应式状态
const store = useStore()
const isFeaturedToggleDisabled = computed(() => {
  return store.state.media.featuredItems.length >= 5
})

2. 规范Vuex状态的更新逻辑 #

虽然你已经用了Vue.set处理数组，但可以调整更新方式强化响应性：

• 更新数组时，优先用Vue原生的变异方法（push/splice等），或者直接替换为新数组：

// mutation中更新featuredItems的正确姿势
SET_FEATURED_ITEMS(state, newItems) {
  // 替换为新数组，确保响应式触发
  state.featuredItems = [...newItems]
  // 若修改单个元素，用Vue.set
  // Vue.set(state.featuredItems, index, updatedItem)
}

• 若修改数组内对象的属性，同样要用Vue.set而非直接赋值：

UPDATE_FEATURED_ITEM(state, { index, key, value }) {
  Vue.set(state.featuredItems[index], key, value)
}

3. 修复fetchStore工具函数的响应性 #

你的fetchStore工具函数得返回响应式的状态引用，不能直接返回普通对象：

// 错误写法：直接返回状态对象，丢失响应式追踪
const fetchStore = () => {
  return useStore().state.media
}

// 正确写法：用computed包裹状态
const fetchStore = () => {
  const store = useStore()
  return {
    featuredItems: computed(() => store.state.media.featuredItems)
  }
}

这样组件中使用的featuredItems是带响应式的，依赖它的计算属性会自动更新。

4. 确保标签页组件的响应式上下文 #

如果标签页用v-show或动态组件实现，容易出现响应式丢失：

• 用<keep-alive>包裹标签页内容组件，避免切换时重复挂载；
• 动态组件的props或状态引用需保持响应式，别用初始化时的静态值。

5. 兜底方案：手动触发响应式更新 #

如果以上方法都无效，可在增删操作完成后手动触发更新（仅作为最后手段）：

async addFeaturedItem({ commit, state }, item) {
  commit('ADD_FEATURED_ITEM', item)
  // 手动触发store的响应式更新
  state._vm.$forceUpdate()
}

问题根源 #

Vue2的响应式依赖对象属性的getter/setter追踪，若计算属性依赖的不是响应式对象的直接引用，或状态更新未触发setter（比如直接修改数组索引、未用Vue.set替换对象），就会导致依赖追踪失效。而@nuxtjs/composition-api在Vue2环境下基于原生响应式系统，必须严格遵循Vue2的响应式规则。

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