如何使用 Vue Composition API 作为跨组件的全局状态？

Question

所以我尝试使用 Vue Composition API 作为全局状态。例如，我创建了名为useLoading.js加载标志的文件。

useLoading.js

import { reactive, toRefs } from '@vue/composition-api'

export default () => {
  const state = reactive({
    isLoading: false
  })

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

  return {
    ...toRefs(state),
    setIsLoading
  }
}

setIsLoading然后我创建了组件 A，当单击按钮时它将调用

ComponentA.vue

<template>
  <div @click="showLoading" />
</template>

<script>
import useLoading from '@/composable/useLoading'

export default {
  setup () {
    const { setIsLoading } = useLoading()

    function showLoading () {
      setIsLoading(true)
    }

    return {
      showLoading
    }
  }
}
</script>

我还有组件 B，当的<div>值为isLoadingtrue

ComponentB.vue

<template>
  <div v-if="isLoading" />
</template>

<script>
import useLoading from '@/composable/useLoading'

export default {
  setup () {
    const { isLoading } = useLoading()

    return {
      isLoading: isLoading
    }
  }
}
</script>

isLoading然而in的价值ComponentB.vue并不是变化（不是反应性的）。但当我调用时，值确实发生了变化ComponentA.vue

我觉得我使用 Composition API 作为全局状态的实现有问题。有人可以帮忙吗？

谢谢

Answer 1

更新

刚刚发现我必须从导出函数中排除状态，如果我将其包含在导出函数中，如果在不同的地方调用它，它将创建其他状态。因此状态不会在组件之间同步。

import { reactive, toRefs } from '@vue/composition-api'

const state = reactive({
    isLoading: false
})

export default () => {

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

  return {
    ...toRefs(state),
    setIsLoading
  }
}