如何使用 Nuxt 组件将参数传递给 vuex getter 方法？（同时保持三点符号）

Question

目标： 我想观察 vuex 状态对象 (MATCH_DATA) 的变化，特定于道具 (topicId) 的值。所以，我想设置观察者来观察MATCH_DATA[topicId]。每当 MATCH_DATA[topicId] 更新时，我想调用一个函数（在这个早期的例子中只是记录它）。

但是，由于 MATCH_DATA 是一个 getter，我该如何向它传递参数？ vuex getter 好像不是设计来接受参数的。我已经通过显式调用 this.$store.state.etc.etc 看到了一些示例。但是有没有办法在保留我目前拥有的三点符号的同时做到这一点？

或者，有没有更好的方法来实现这个目标而不涉及 vuex getter？

当前代码：

Nuxt 组件：

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    props: ['topicId'],

    computed: {
        ...mapGetters('sessionStorage', ['MATCH_DATA']),
    },

    watch: {
        MATCH_DATA (newMatchData, oldMatchData) {
            console.log(newMatchData);
        }
    },
    
    mounted() {
        this.SUBSCRIBE_TO_TOPIC(this.topicId);
    },
    
    methods: {
        ...mapActions('sessionStorage', ['SUBSCRIBE_TO_TOPIC'])
    }
}

vuex 商店：

/* State */
export const state = () => ({
    MATCHES: {},
});

/* GETTERS */
export const getters = {
    MATCH_DATA: (state) => {
        return state.MATCHES;
    },
};

Answer 1

您的 getter 可以简单地 return 像这样的函数：

export const getters = {
    MATCH_DATA: (state) => {
        return topicId => {
          // return something
        }}
    },
};

然后你可以创建一个计算属性来访问那些 getter:

export default {
  computed: {
    ...mapGetters('sessionStorage', ['MATCH_DATA']),

    yourComputedProperty () {
      return this.MATCH_DATA(this.topicId)
    }
  }
}

然后您可以观察计算的属性对变化做出反应。

watch: {
  yourComputedProperty (newData, oldData) {
    console.log(newData);
  }
}

如何使用 Nuxt 组件将参数传递给 vuex getter 方法？（同时保持三点符号）

How to use a Nuxt component to pass a parameter to a vuex getter method? (while maintaining three dot notation)

getter-setter

vue.js

vuex

nuxt.js

如何使用 Nuxt 组件将参数传递给 vuex getter 方法？ （同时保持三点符号）

How to use a Nuxt component to pass a parameter to a vuex getter method? (while maintaining three dot notation)

getter-setter

vue.js

vuex

nuxt.js

如何使用 Nuxt 组件将参数传递给 vuex getter 方法？（同时保持三点符号）