寻求Vue.js组件间松耦合数据交互的Hook/库方案

现成工具推荐 #

• Zustand：支持动态创建全局状态容器，完全契合你的需求。可以封装钩子实现预期用法：

import { create } from 'zustand'

const storeCache = new Map()

function useStore(identifier) {
  if (!storeCache.has(identifier)) {
    const store = create((set) => ({
      data: null,
      setData: (newData) => set({ data: newData })
    }))
    storeCache.set(identifier, store)
  }
  const store = storeCache.get(identifier)
  const data = store((state) => state.data)
  const setData = store((state) => state.setData)
  return { data, setData }
}

相同标识符的组件会共用首次创建的Store，data具备响应式特性，调用setData后所有关联组件都会同步更新。

• Pinia（Vue生态）：虽然常规用法需要预定义Store，但可通过动态创建适配需求：

import { defineStore } from 'pinia'

const storeCache = new Map()

function useStore(identifier) {
  if (!storeCache.has(identifier)) {
    const dynamicStore = defineStore(identifier, {
      state: () => ({ data: null }),
      actions: {
        setData(newData) {
          this.data = newData
        }
      }
    })
    storeCache.set(identifier, dynamicStore)
  }
  const store = storeCache.get(identifier)()
  return {
    data: store.data, // Pinia的state本身是响应式ref-like对象
    setData: store.setData
  }
}

手动轻量实现 #

如果不想引入第三方库，自己实现极简版本也很简单：

Vue环境 #

import { ref } from 'vue'

// 全局缓存存储已创建的Store
const storeMap = new Map()

function useStore(identifier) {
  if (!storeMap.has(identifier)) {
    const data = ref(null)
    const setData = (newData) => {
      data.value = newData
    }
    storeMap.set(identifier, { data, setData })
  }
  return storeMap.get(identifier)
}

React环境 #

import { useState, useRef, useEffect } from 'react'

const storeMap = new Map()

function useStore(identifier) {
  if (!storeMap.has(identifier)) {
    const [data, setData] = useState(null)
    storeMap.set(identifier, { data, setData })
  }
  const store = storeMap.get(identifier)
  const dataRef = useRef(store.data)
  const setDataRef = useRef(store.setData)
  
  useEffect(() => {
    dataRef.current = store.data
  }, [store.data])
  
  return {
    data: dataRef.current,
    setData: setDataRef.current
  }
}

这个实现完全满足核心需求：无需预定义Store，相同标识符复用实例，数据更新同步到所有关联组件。

内容的提问来源于stack exchange，提问作者Dominic