在vue中如何实现两个不相关的界面数据同步

场景

界面A和界面B，A中负责获取展示，B中负责设置新值。

解决思路

其实在其他平台比如说移动端特别简单，设置key和value就可以了，到了相关界面根据根据生命周期响应式改编就可以了。但是偏偏在vue3中没有关于界面出现的生命周期方法，或者有也需要通过其他三方的方式去实现，目前为止有点大动干戈的感觉，有没有其他方式实现？仔细看了一下，其实本身vue3也有很多存储的方式，这里就利用项目中本身的useStorage去做了，思路大差不多，只需要利用vue3的响应式，然后利用watch去观察数据变化，或者通过计算属性存储动态改变也可以。

解决步骤

首先需要一个工具类去做专门的存储和设置

声明：

const temp = useStorage(key, value)

获取：

  function setTemp(value: string) {
    temp.value = value
  }

完整代码：

// setup
export const useAppStore = defineStore('app', () => {
  const temp = useStorage('temp', '') // 假设默认值为null
  /**
   * 根据语言标识读取对应的语言包
   */
  const locale = computed(() => {
    if (language?.value == 'en') {
      return en
    } else {
      return zhCn
    }
  })


  function setTemp(value: string) {
    setTemp.value = value
  }
  return {
    temp,
    setTemp
  }
})

界面B：

const store = useAppStore()
function setTemp(title: string) {
  store.setTemp(title)
}

界面A

import { useAppStore } from '@/store/modules/app'
import { storeToRefs } from 'pinia'

const { temp } = storeToRefs(store) // 使dashboardTitle具有响应式

watch(temp, (newValue) => {
  title.value = newValue
})