根据 Vuex 文档,您可以将有效负载传递给 getter 方法,只要该方法返回一个函数。
https://vuex.vuejs.org/en/getters.html
我不清楚如何格式化返回函数的函数。
就我而言,我想将产品对象传递给 getter 方法,并使用 product.price 数据和 state 中的数据来返回计算出的价格。
这是我目前采用的方法的精简版本:
const store = new Vuex.Store({
state: {
product: {
price: 12.99,
},
colors_front: 1,
colors_back: 0,
},
getters: {
printPrice: (state) => (product) => {
return (state, product) => {
var colors_front = state.print_product.colors_front,
colors_back = state.print_product.colors_back;
print_price = parseFloat(product.price) + parseFloat(colors_front * 2.25) + parseFloat(colors_back * 2.25);
return parseFloat(print_price).toFixed(2);
}
},
}
}
当我尝试在我的组件中访问这个 getter 时,我收到了作为文本字符串的函数代码。
<template>
<div>{{ printPrice(product) }}</div>
</template>
export default {
computed: {
...mapState(['product']),
...mapGetters(['printPrice']),
}
}
任何人都可以帮助我理解更好地返回函数的 setter/getter 吗?有没有更合适的方法来做到这一点?
我想,因为我实际上并没有改变状态数据,所以这种方法更适合作为 getter 而不是 mutator,但我愿意接受所有建议。
谢谢!
最佳答案
问题是您的 getter 正在返回一个也返回一个函数的函数,因此,当 Vuex 运行该函数时,它返回另一个似乎被转换为字符串的函数(可能是模板解析器?)。
只需通过更改以下内容,确保返回一个具有预期输出的函数:
printPrice: (state) => (product) => {
return (state, product) => {
var colors_front = state.print_product.colors_front,
colors_back = state.print_product.colors_back;
print_price = parseFloat(product.price) + parseFloat(colors_front * 2.25) + parseFloat(colors_back * 2.25);
return parseFloat(print_price).toFixed(2);
}
},
对此:
printPrice: (state) => (product) => {
var colors_front = state.print_product.colors_front,
colors_back = state.print_product.colors_back;
print_price = parseFloat(product.price) + parseFloat(colors_front * 2.25) + parseFloat(colors_back * 2.25);
return parseFloat(print_price).toFixed(2);
},
这样我们就删除了第一级返回函数中的包装函数。
关于Vuex Getters 方法样式如何返回函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49621958/