Vuex（Vue3）无法传输有效负载

Question

为了更简洁的展示，我删除了案例中不涉及的方法。 需要返回指定

count

的对象的

id

值。当我将有效的

id

传递给

counter

时，控制台似乎显示整个 getter 而不是传输的标识符。

成分：

props: {
  id: Number,
},
methods: {
  ...mapGetters([
    'getBasketItemCountsById',
  ]),
},
computed: {    
  counter() {
    return this.getBasketItemCountsById(this.id /* 1 */)
  },
},

Vuex 商店：

import {createStore} from "vuex";

const store = createStore({
    state() {
        return {
            /* id, price, title, count */
            basket: [
                { id: 1, price: 100, title: 'some title', count: 1},
            ],
        }
    },
    getters: {
        getBasketItemCountsById(state, id) {
            const founded = state.basket.find(x => x.id === id);
            console.log([id, founded])
            return founded !== undefined ? founded.count : 0
        }
    },
});

export default store;

控制台日志：

Answer 1

Vuex 中的

Getters 不接受额外的参数。它们的目的是根据当前状态返回计算值。

在您的代码中，

id

属性实际上是整个getter对象。使用它，您可以访问当前 getter 中的其他 getter 函数。

最后，为了解决您的问题，方法式访问为您提供了通过

id

进行的自定义搜索。它利用了currying风格。

getters: {
    getBasketItemCountsById: state => id => {
        const founded = state.basket.find(x => x.id === id);
        console.log([id, founded])
        return founded !== undefined ? founded.count : 0
    }
},

这里，不是从 getter 返回一个简单的值（它们是这样设计的），而是返回另一个函数。 returnee 函数可以接受所需数量的参数，甚至返回另一个函数来扩展柯里化。