如何使用 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
  }
}

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

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，当 isLoading 的值为 true

时，它将用于呈现 <div>

ComponentB.vue

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

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

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

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

但是 ComponentB.vue 中 isLoading 的值没有改变（不是反应性的）。但是当我在 ComponentA.vue

中调用时，值确实发生了变化

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

谢谢

Answer 1

像这样的东西会起作用：

useLoading.js

import { reactive } from 'vue'
export const state = reactive({
  isLoading: false
})

App.vue

<script setup>
import {state} from './useLoading.js';
</script>

<template>
  <input v-model="state.isloading" type="checkbox" />
</template>

Answer 2

更新

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

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

const state = reactive({
    isLoading: false
})

export default () => {

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

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

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

How to use Vue Composition API as Global State Across Components?

javascript

vue.js

vue-composition-api