将参数传递给 Vuex 中的 mapGetters

Question

美好的一天。

我在 vue.js 项目中使用模块。现在我需要从 getter 获取过滤后的数据，但不要理解如何提供参数。

我想为 Getter 提供 'name' 参数。我如何在 Component.vue 中做到这一点？

/*State in vuex*/
state: {
   tempMessageValues: [
            { name: 'RU', status: 'none', selected: false },
            { name: 'BY', status: 'none', selected: false },
            { name: 'KG', status: 'none', selected: false }
        ]
}

/*Getters*/

import * as types from '../types';

export default {
    [types.GETTERS.TEMP_MESSAGE_VALUES]: state => {
        return state.tempMessageValues.find(country => country.name === name);
    }
};

/*Types*/

export const GETTERS = {
    TEMP_MESSAGE_VALUES: 'shared/TEMP_MESSAGE_VALUES'
};

/*Code in Component.vue*/

import * as types from "./store/types";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      getTempMessValues: types.GETTERS.TEMP_MESSAGE_VALUES
    })
  }
};

Answer 1

一种方法是 return 来自 getter 的函数，然后您可以使用它在

中传递参数

export default {
[types.GETTERS.TEMP_MESSAGE_VALUES]: state => {
    return (name) => state.tempMessageValues.find(country => country.name === name);
}
};

现在您可以通过调用函数将参数传递给 getter：

this.getTempMessValues('YourValue')

Answer 2

文档建议使用柯里化将参数传递给 getter;

export default {
  [types.GETTERS.TEMP_MESSAGE_VALUES]: state => name =>
    state.tempMessageValues.find(country => country.name === name)
};

参见 https://vuex.vuejs.org/guide/getters.html#method-style-access 他们的例子。您实际上是在第一次调用 getter return 函数。

这有意义吗？

将参数传递给 Vuex 中的 mapGetters

Pass params to mapGetters in Vuex

javascript

getter

vue.js

vuex