如何将Vuex响应式状态传递给Vue3组合式函数？

问题根源 #

你当前的写法是在组合式函数初始化时一次性调用getter获取feed快照，这个feed变量只是初始状态的静态值，不会随Vuex中feed的变更自动更新。后续即使Vuex里的feed通过mutation修改，组合式函数里的feed也不会同步，导致依赖它的计算属性feedIsReady也无法更新。

正确解决方案 #

要让计算属性能响应Vuex的状态变化，必须在计算属性的回调函数内部调用getter，利用Vue的响应式追踪机制，让computed感知到Vuex state的变化。

方案1：直接在目标计算属性内调用getter

import { computed } from 'vue'
import { useStore } from 'vuex'

export function useFeedStatus(feedId) {
  const store = useStore()
  
  const feedIsReady = computed(() => {
    // 每次computed重新计算时，都会调用getter获取最新的feed
    const feed = store.getters['feeds/getFeedById'](feedId)
    // 用可选链避免feed不存在时的报错
    return feed?.info?.ready ? 'READY' : 'NOT READY'
  })

  return { feedIsReady }
}

方案2：先定义响应式的feed计算属性（便于复用）

如果需要在组合式函数内多次使用feed数据，可以先把feed封装成计算属性，再基于它派生其他计算属性：

import { computed } from 'vue'
import { useStore } from 'vuex'

export function useFeedStatus(feedId) {
  const store = useStore()
  
  // 定义响应式的feed，依赖Vuex的state
  const feed = computed(() => store.getters['feeds/getFeedById'](feedId))
  
  const feedIsReady = computed(() => {
    // 访问feed.value获取最新值
    return feed.value?.info?.ready ? 'READY' : 'NOT READY'
  })

  return { feed, feedIsReady }
}

为什么之前的方法没用？ #

你尝试的reactive、toRefs只能处理本地对象的响应式，但Vuex的state本身已经是响应式的。问题出在你没有在响应式上下文（比如computed、watch）中访问getter，导致Vue无法追踪到Vuex状态的变化。把getter调用放到computed内部后，Vue会自动追踪getter依赖的state，一旦state变更就触发computed重新计算。

额外注意 #

如果feedId是响应式变量（比如ref或reactive对象的属性），computed也会自动追踪它的变化，当feedId改变时，会自动获取对应ID的最新feed。

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