vue.js Pinia在悬挂物中具有相同的React性

osh3o9ms 于 2023-01-17 发布在 Vue.js

关注(0)|答案(1)|浏览(232)

是否有可能在Pinia的商店之间共享React状态，例如：

export const useMainStore = defineStore('mainStore', {
state: () => ({
    data: [{name: "some name", amount: useSomeStore().amount}]
}),

export const useSomeStore = defineStore('someStore', {
state: () => ({
    amount: 0
}),

其思想是useSomeStore.amount值与useMainStore数据值同步。
因此，当我将useSomeStore中的数量更改为5时，我预计useMainStore中的数据值将相应更改为：

[{name: "some name", amount: 5}]

我知道我可以订阅商店或使用观察者，但有没有更好的解决方案？
我用storeToRefs做了工作解决方案，但不确定是否有缺点。
https://codesandbox.io/s/competent-breeze-wylkoj?file=/src/stores/tomato.ts

vue.js

来源：https://stackoverflow.com/questions/75135554/pinia-shared-reactivity-in-stores

1条答案

按热度按时间

u5i3ibmn1#

记住，pinia状态是React对象。
因此，您总是可以在其中一个上设置一个computed，它引用另一个存储的状态。
一般示例：

const useStoreOne = defineStore('one', {
  state: () => ({
    foo: 'bar'
  })
})

const useStoreTwo = defineStore('two', {
  state: () => ({
    foo: computed({
      get() { return useStoreOne().foo },
      set(val) { useStoreOne().foo = val } 
    })
  })
})

注意：storeToRefs的作用和上面一样，所以你可以把storeTwo写成：

const useStoreTwo = defineStore('two', {
  state: () => ({
    foo: storeToRefs(useStoreOne()).foo
  })
})

但是这有点毫无意义，为什么要在任何地方使用useStoreTwo().foo而不是直接使用useStoreOne().foo呢？
别搞错了：上面的模式在两个存储的foo之间设置了一个双向绑定。但是，第二个存储的foo是无用的。无论在何处使用它，都可以直接使用第一个存储的foo。
根据一般原则，当您遇到这种模式（或遇到需要它的情况）时，它应该发出一个信号：你使用状态管理是因为你想要"*一个真相来源 *"，而不是更多。

赞(0）回复(0）举报 2023-01-17

我来回答

vue.js Pinia在悬挂物中具有相同的React性

1条答案

相关问题

热门标签

最新问答