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

Question

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

globalState.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 package) 可以在 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 应用程序中，您可以使用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

演示 2

Answer 2

最新版本的 @vue/reactivity 不导出 watch 和 watchEffect API，因此此处标记的答案不再起作用。

相反，您将使用 effect函数，其作用与 watchEffect 类似，但不返回取消订阅函数。您将使用提供的 stop函数并传递effect的返回值。

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

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

  useEffect(() => {
    const runner = effect(() => {
      setCount(globalState.counter)
    })
    return () => stop(runner)
  })

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