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

So I tried to use Vue Composition API as global state. As example, I created file called useLoading.js as loading flag.

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
  }
}

Then I created component A in which it will call the setIsLoading when the button is clicked

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>

I also have component B in which it will use to render a <div> when the value of isLoading is true

ComponentB.vue

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

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

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

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

Yet the value of isLoading in ComponentB.vue was not change (not reactive). But the value did change when I called in in ComponentA.vue

I feel like there is something wrong with my implementation in using Composition API as global state. Can anyone help?

Thank you

CodePudding user response：

Something like this will work:

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>

CodePudding user response：

UPDATE

Just found out I have to exclude the state from the export function, If I include it inside the export function, it will create other states if it is called in a different place. So the state will not sync between components.

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

const state = reactive({
    isLoading: false
})

export default () => {

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

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