如何使用Vue组合API作为跨组件的全局状态？
如何使用Vue组合API作为跨组件的全局状态？
提问于 2021-09-15 09:55:25
因此，我尝试使用Vue组合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时，它将用于呈现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>然而，isLoading在ComponentB.vue中的值没有变化(不是反应性的)。但是，当我调用ComponentA.vue时，值确实发生了变化。
我觉得我的实现在使用复合API作为全局状态时有问题。有人能帮忙吗？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-09-16 04:30:28
更新
刚刚发现，我必须将状态排除在导出函数之外，如果我将它包含在导出函数中，如果在另一个地方调用它，它会创建其他状态。因此，状态将不会在组件之间同步。
import { reactive, toRefs } from '@vue/composition-api'
const state = reactive({
isLoading: false
})
export default () => {
const setIsLoading = (loading) => {
state.isLoading = loading
}
return {
...toRefs(state),
setIsLoading
}
}Stack Overflow用户
发布于 2021-09-15 10:39:16
像这样的东西会有用的：
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69197831
复制相关文章
![在 Vue.js 中使用无状态组件[每日前端夜话0xB9]](https://ask.qcloudimg.com/raw/yehe-fbc03cfef/ul1ocqcquv.png)
相似问题
Vue组合api -使用组件道具的全局状态可组合
使用SnackBar作为Vue +Vue中的全局组件
Vue使用组合api更新数组状态
Vue组合API createComponent子组件
如何使用带有组合API的vue 2键入提示Vue组件方法
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
