我正在嘗試在微前端應用程式中傳遞像這樣創建的全域狀態。但問題是我必須以某種方式“觀察”更改，以便例如在 React 應用程式中設定狀態。
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 生態系統之外觀察這個回應式物件參考的變化。
uj5u.com熱心網友回復：
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 logo from './logo.svg'
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448433.html