从组件映射状态到 vuex 存储的动态状态对象答案

【问题标题】：mapstate to dynamic state objects of vuex store from the component从组件映射状态到 vuex 存储的动态状态对象
【发布时间】：2021-03-04 09:35:18
【问题描述】：

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

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

在组件中->

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

在商店->

   state : {
      these states also should be dynamic
  },

或者在 vue 中是否有任何解决方法来实现这一点？

【问题讨论】：

标签： vue.js vuex vuejs3

【解决方案1】：

我通过使用 getter 找到了另一种方法。当我们使用它时，我们根本不需要映射状态。

由于 Vuex getter 不接受参数，所以我从 getter 中返回一个带有参数的函数。

  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 观察器还可以访问旧值和新值。

【讨论】：