如何在 Vue 生态系统之外使用 Vue 3 响应式对象

我试图在微前端应用程序中传递这样创建的全局状态。但问题是我必须以某种方式“观察”更改，以便在 React 应用程序中设置 State。

全局状态.js

import { reactive } from 'vue'

const globalState = reactive({
  counter: 0
})

export default globalState

在 Vue 微前端中，我这样做并且工作正常

import { createApp } from 'vue'
import App from './App.vue'

export default (rootEl, globalState) => {
  const app = createApp(App)
  app.config.globalProperties.globalState = globalState
  app.mount(rootEl)
}

然而，在 React 应用程序中，我正确地传递了引用，但是当计数器值发生变化时，我必须以某种方式检测它并调用 setState 才能重新呈现更改。问题是我如何观察 Vue 生态系统之外的反应式对象引用的变化。

The 反应性API https://vuejs.org/api/reactivity-core.html可作为独立库（独立于vue包）可以在 Vue 上下文之外使用。

@vue/reactivity https://www.npmjs.com/package/@vue/reactivity包括reactive() https://vuejs.org/api/reactivity-core.html#reactive/ref() https://vuejs.org/api/reactivity-core.html#ref. And @vue-reactivity/watch https://www.npmjs.com/package/@vue-reactivity/watch包括watch() https://vuejs.org/api/reactivity-core.html#watch/watchEffect() https://vuejs.org/api/reactivity-core.html#watcheffect.

例如，您可以使用watchEffect (or watch) 记录新值globalState.counter并将其显示在页面上的元素中：

// main.js
import { watchEffect } from '@vue-reactivity/watch'
import globalState from './globalState'

watchEffect(() => {
  console.log('counter', globalState.counter)
  document.querySelector('#count').innerHTML = globalState.counter
})

// globalState.js
import { reactive } from '@vue/reactivity'

const globalState = reactive({
  counter: 0
})

export default globalState

demo 1 https://stackblitz.com/edit/vue-reactivity-outside-apps?file=main.js

在 React 应用程序中，您可以使用watch记录新值globalState.counter然后调用组件的setState()重新渲染组件：

import { useState, useEffect } from 'react'
import { watch } from '@vue-reactivity/watch'
import globalState from './globalState'
import GlobalCounterButton from './GlobalCounterButton'

function App() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const unwatch = watch(
      () => globalState.counter,
      (newValue, oldValue) => {
        if (newValue !== oldValue) {
          console.log('counter', newValue)
          setCount(newValue)
        }
      }
    )
    return () => unwatch()
  })

  return (
    <div>
      <GlobalCounterButton />
      <h2>count is: {count}</h2>
    </div>
  )
}

export default App

demo 2 https://stackblitz.com/edit/vue-reactivity-in-react-app-wddxb7?file=src%2FApp.jsx