如何解决解决 Vue 3 可组合中的循环依赖
我正在尝试使用 Vue 3 可组合函数将逻辑与应用程序中的组件分离。随着我的可组合越来越复杂,它们也越来越相互依赖。我不想使用 Vuex,因为 store 变得臃肿,所有状态都留在那里,所以我希望每个可组合管理自己的状态。有没有更好的方法来满足依赖可组合的以下需求?
A.ts
import {readonly,ref} from 'vue'
import {useB} from '@/use/A2'
const A = ref(1)
export function useA() {
const {B} = useB()
const output = () => {
console.log('Output:',B.value)
}
return {
A: readonly(A),output,}
}
B.ts
import {readonly,ref} from 'vue'
import {useA} from '@/use/A'
const B = ref(999)
export function useB() {
const {A} = useA()
const increment = () => {
B.value += A.value
}
return {
B: readonly(B),increment,}
}
目前这会导致循环依赖,从而导致堆栈溢出。我想保持以下属性:
- 任何可组合/组件都可以从 A 或 B 导入,并读取/使用其各自的数据
- A 和 B 的
ref
对象只能由它们的可组合修改(即 B 或组件不能更改 A 的值)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。