使用Vue Composition API实现跨组件全局状态时响应失效如何解决

问题原因 #

你当前的useLoading导出的是工厂函数，每次执行useLoading()都会初始化一个全新的reactive状态实例，组件A和组件B调用时拿到的是互不关联的两份状态，因此组件A修改的状态无法同步到组件B。

修复方案 #

将状态定义移到工厂函数外部，形成全局单例，确保所有组件调用时拿到的是同一份响应式状态：

// 修正后的useLoading.js
import { reactive, toRefs } from '@vue/composition-api'

// 状态移到函数外部，全局唯一
const state = reactive({
  isLoading: false
})

const setIsLoading = (loading) => {
  state.isLoading = loading
}

export default () => {
  return {
    ...toRefs(state),
    setIsLoading
  }
}

补充说明 #

• 修正后原有组件A、组件B的代码不需要做任何改动，即可实现状态的跨组件同步响应
• 如果你的项目是Vue3版本，只需将导入语句改为import { reactive, toRefs } from 'vue'即可，其余逻辑保持一致
• 若你需要的是局部范围的共享状态而非全局单例，可以结合provide/inject能力，在父级注入状态实例，后代组件统一消费即可实现局部范围的状态共享。

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