Vue3 Script Setup?

[ccqgithub]

我看文档上，vue需要通过observer包装组件，但是针对Vue3 的script setup，该怎么实现？

script setup 组件样式：

<template>
  <div>{{ test }}</div>
</template>

<script setup>
const test = 1;
</script>

[MisicDemone]

在当前组件内应该是无解的。不过可以试试另起一个文件导出

import Component from './component.vue'
import { observer } from '@formily/reactive-vue'

export WrappedComponent = observer(Component)

[ccqgithub]

在当前组件内应该是无解的。不过可以试试另起一个文件导出

import Component from './component.vue'
import { observer } from '@formily/reactive-vue'

export WrappedComponent = observer(Component)

我看了看代码，好像可以用 useObserver 这个hooks？observer 其实也是在setup代码执行之前调用了useObserver。

[MisicDemone]

噢对，可以，我给忘了😅

[knight-peter]

在当前组件内应该是无解的。不过可以试试另起一个文件导出

import Component from './component.vue'
import { observer } from '@formily/reactive-vue'

export WrappedComponent = observer(Component)

我看了看代码，好像可以用 useObserver 这个hooks？observer 其实也是在setup代码执行之前调用了useObserver。

请问useObserver这个hooks是在哪个文档里的，找不到这个hooks。

[eric-gitta-moore]

@knight-peter 没有文档🤣，只有代码

formily/packages/reactive-vue/src/observer/observerInVue3.ts

Line 12 in ca55e48

useObserver(options)

[eric-gitta-moore]

还发现个更好点的办法，把 vue proxy之后的reactive再丢给 mobx，mobx makeProxy 之后再塞到 createForm({values: 这里})
那么 formily 写入数据就会同步 mobx同时也会写入到 vue ref里面。然后就不需要每个组件都写 useObserver() 了

参考: https://stackblitz.com/~/github.com/eric-gitta-moore/formily-vue-bind-pinia?file=src/components/HelloWorld.vue&view=editor

const source = ref({})
// 再包一层 proxy，让 formily 往这里写就完事了。把 vue 的 ref 作为 formily 的数据源
const val = observable(source.value);
console.log(`isObservable`, isObservable(val));

const form = createForm({
  values: val,
});