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

Question

我试图在微前端应用程序中传递这样创建的全局状态。但问题是我必须以某种方式“观察”更改，以便在 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 生态系统之外的反应式对象引用的变化。

Answer 1

Reactivity API可作为独立库（与vue包分开）提供，可以在 Vue 上下文之外使用。

@vue/reactivity包括reactive()/ ref()。并@vue-reactivity/watch包括watch()/ watchEffect()。

例如，您可以使用watchEffect(或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

演示1

在 React 应用程序中，您可以使用 awatch来记录 的新值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

演示2