Vue2.7中如何在setup语法中导出Vuex响应式状态？

问题原因 #

你之前的写法都丢失了响应式：

• 直接赋值const count1 = store.state.count只是取了当前值，不会追踪state后续变化
• ref(store.state.count)仅在初始化时赋值，state更新后不会同步到ref的value
• 自定义useStore()只是返回store实例，没有利用Vuex内置的响应式追踪机制

正确解决方案 #

方案1：用computed包裹state（最直接）

Vuex的state本身是响应式的，通过computed可以自动追踪其依赖，保持视图同步：

import { computed } from 'vue'
import { store } from '@/store' // 你的store导出路径

export default {
  setup() {
    // 用computed包裹，自动监听store.state.count的变化
    const count = computed(() => store.state.count)
    
    // 示例：修改state的方法
    const increment = () => store.commit('increment')

    return { count, increment }
  }
}

方案2：Vuex官方useStore + toRefs

确保你的Vuex版本≥3.6.0（适配Vue2.7的最低要求），直接使用Vuex提供的useStore函数，配合toRefs处理状态：

import { toRefs } from 'vue'
import { useStore, mapState } from 'vuex'

export default {
  setup() {
    // 用Vuex官方的useStore获取实例（无需自定义）
    const store = useStore()
    // mapState生成响应式状态对象，toRefs转为单个ref
    const stateRefs = toRefs(mapState(['count'])(store))
    const { count } = stateRefs

    const increment = () => store.commit('increment')

    return { count, increment }
  }
}

关键注意事项 #

• 必须升级Vuex到3.6.0及以上版本，否则不支持Vue2.7的Composition API特性
• 不要自行封装useStore，直接使用Vuex导出的官方函数，它会自动绑定Vue实例中的store
• 只有通过computed或Vuex官方响应式工具处理后的state，才能在setup中保持响应式

内容的提问来源于stack exchange，提问作者Cesar Martinez Dominguez