所以我嘗試使用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
<模板>
<div @click="showLoading" />>
</template>
<script>。
import useLoading from '@/composable/useLoading'/span>
export default {
設定（） {
const { setIsLoading } = useLoading()
function showLoading ( ) {
setIsLoading(true)
}
return {
showLoading
}
}
}
</script>
我還有一個組件B，當isLoading的值為true
<div>/code>。
ComponentB.vue
<模板>
<div v-if="isLoading" />
</template>
<script>
import useLoading from '@/composable/useLoading'/span>
export default {
設定（） {
const { isLoading } = useLoading()
return {
isLoading: isLoading
}
}
}
</script>
然而在ComponentB.vue中的isLoading的值沒有變化（不是反應式）。但是，當我在ComponentA.vue中呼叫時，其值確實發生了變化
。
我覺得在使用Composition API作為全域狀態時，我的實作有問題。誰能幫幫我？
謝謝你
uj5u.com熱心網友回復：
像這樣的東西會起作用：
useLoading.js
import { reactive } from 'vue'/span>
export const state = reactive（ {
isLoading: false。
})
App.vue
<script setup>/span>
import {state}. from ' ./useLoading.js';
</script>>
<template>
<input v-model="state。 isloading" type="checkbox" />。
</template>
uj5u.com熱心網友回復：
UPDATE
我剛剛發現我必須把狀態從匯出函式中排除，如果我把它包含在匯出函式中，如果它在不同的地方被呼叫，它將創建其他的狀態。所以狀態不會在組件之間同步。
span class="hljs-keyword">import { reactive, toRefs } from '@vue/composition-api'
const state = reactive（{
isLoading: false。
})
export default ( ) => {
const setIsLoading = （loading） => {
state.isLoading = loading
}
return {
...toRefs（state）。
setIsLoading
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/310023.html
標籤：
上一篇：vue3中的多層深V模型資料系結