Vue3中Vuex无法传递payload：根据ID获取count值异常

Vuex的getter方法默认接收的第一个参数是state，第二个参数是getters对象（所有getter的集合）。你直接把id作为第二个参数，导致这里的id实际拿到的是整个getters对象，而非你传入的id值，这就是控制台打印异常的原因。

将getter定义为返回一个函数的形式，通过闭包访问state，同时允许调用时传入自定义参数：

修改Vuex Store的getter代码 #

import {createStore} from "vuex";

const store = createStore({
    state() {
        return {
            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;

组件代码无需修改 #

你组件中this.getBasketItemCountsById(this.id)的调用逻辑是正确的，修改getter后即可正常传入id并返回对应的count值。

内容的提问来源于stack exchange，提问作者Hopex Development