Así que traté de usar la API de composición de Vue como estado global. Como ejemplo, creé un archivo llamado useLoading.js como indicador de carga.
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 } } Luego creé el componente A en el que llamará a setIsLoading cuando se haga clic en el botón
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> También tengo el componente B en el que se usará para representar un <div> cuando el valor de isLoading sea 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> Sin embargo, el valor de isLoading en ComponentB.vue no cambió (no fue reactivo). Pero el valor cambió cuando llamé a ComponentA.vue
Siento que hay algo mal con mi implementación al usar la API de composición como estado global. ¿Alguien puede ayudar?
Gracias
ACTUALIZAR
Acabo de descubrir que tengo que excluir el estado de la función de exportación. Si lo incluyo dentro de la función de exportación, creará otros estados si se llama en un lugar diferente. Por lo tanto, el estado no se sincronizará entre los componentes.
import { reactive, toRefs } from '@vue/composition-api' const state = reactive({ isLoading: false }) export default () => { const setIsLoading = (loading) => { state.isLoading = loading } return { ...toRefs(state), setIsLoading } }Algo como esto funcionará:
useLoading.js
import { reactive } from 'vue' export const state = reactive({ isLoading: false })aplicación.vue
<script setup> import {state} from './useLoading.js'; </script> <template> <input v-model="state.isloading" type="checkbox" /> </template>