mapstate 从组件到 vuex store 的动态状态对象

Question

我正在尝试通过 vue3 和 vuex 构建一个监视列表（数据流程序）。当观察列表组件订阅一个符号时，它应该从商店接收该符号的更新。从组件中删除订阅时，特定组件不应在此之后接收到该状态更改。我们不能将存储中的符号名称硬编码到每个组件的映射状态，因为可能有数百个。如果我们将所有符号作为单个对象的属性并将状态映射到它，这将是一个性能开销，因为并非所有 watchLists 都引用所有符号。

所以我的问题是有什么方法可以将动态变化的数组注入 mapstate？

组件中->

computed: {
    ...mapState([this should change dynamically]),
  },

店内->

   state : {
      these states also should be dynamic
  },

或者 vue 中是否有任何变通方法可以实现此目的？

Answer 1

我找到了使用 getters 的替代方法。当我们使用它时，我们根本不需要映射状态。

我从 getters 返回一个带有参数的函数，因为 Vuex getters 不接受参数。

  symbol: (state) => (symbol) => {
           return state.payload[symbol]
       }

从组件中，我正在观察 getter。

   this.$store.watch(
          (state, getters) => getters.allSymbols(currency),
          (newValue, oldValue) => {
            this.symbolObjects[symbol] = newValue;
           // do something
          },
      );

每次货币更新时手表都会触发。此外，使用 Vuex 观察器还具有访问旧值和新值的好处。

mapstate 从组件到 vuex store 的动态状态对象

mapstate to dynamic state objects of vuex store from the component

vue.js

vuex

vuejs3