我一直在观看一门Vuex课程,直到现在为止一切都很好,直到他们在getter中包含了箭头功能,然后在计算的属性和动作中使用了它。代码如下:
项目结构:
const _products = [
{ id: 1, title: "iPad 4 Mini", price: 500.01, inventory: 2 },
{ id: 2, title: "H&M T-Shirt White", price: 10.99, inventory: 10 },
{ id: 3, title: "Charli XCX - Sucker CD", price: 19.99, inventory: 5 }
];
store.js
中的吸气剂:
productIsInStock() {
return product => {
return product.inventory > 0;
};
}
store.js
中使用此吸气剂的动作:
addProductToCart(context, product) {
if (context.getters.productIsInStock(product)) {
let cartItem = context.state.cart.find(item => item.id === product.id);
if (!cartItem) {
context.commit("pushProductToCart", product.id);
} else {
context.commit("incrementItemQuantity", cartItem);
}
context.commit("decrementProductInventory", product);
}
},
使用此吸气剂和模板ProductList.vue
的计算式:
<template>
<li v-for="(product, index) in products" v-bind:key="index">
{{product.title}} - {{product.price | currency}} - {{product.inventory}}
<button
@click="addProductToCart(product)"
:disabled="!productIsInStock(product)"
>
Add product to cart
</button>
</li>
</template>
// ...
computed: {
products() {
return this.$store.state.products;
},
productIsInStock() {
return this.$store.getters.productIsInStock;
}
},
它完全正常,但是我不明白为什么。主要是我不了解此getter在计算语句和if语句中如何工作。我试图在控制台中重复相同的结构,但是由于某种原因,它根本不起作用。希望我提供了足够的代码
答案 0 :(得分:0)
您可以在商店中将吸气剂定义为函数。该函数与状态,其他获取器一起调用(在模块的情况下,也与根状态和根获取器一起调用)。基于此,您将返回一些值。通常,该数据是某个值(例如,对象,数字,布尔值等)
getters: {
numberOfPolarBears (state) {
return state.polarBears.length;
}
}
javascript中的函数与其他数据没有太大区别。这样的函数也可以定义为一些变量。
// Method 1
function ticklePolarBear (bear) {
bear.tickle();
}
// Method 2
var ticklePolarBear = function (bear) {
bear.tickle();
};
无论哪种情况,您都可以通过以下方式调用它:
ticklePolarBear(frostyTheBear);
为什么这很重要?在正常情况下映射吸气剂并以这种方式获取一些数据时,没有什么可以阻止您映射吸气剂并返回可以稍后调用的函数。
getters: {
namedPolarBear (state) {
return function (index) {
if (index >= state.polarBears.length) {
return null;
}
return state.polarBears[index].name;
}
}
}
箭头函数设置this
的上下文的方式有所不同,但是与上面的示例非常相似。
computed
为某些属性提供(在这种情况下)getter函数。在您的示例中,它返回商店中的吸气剂返回的内容,即一个函数。由于它是一个函数,因此可以调用它。
在这种情况下,没有任何反应,因此您还可以编写以下内容:
data () {
return {
productIsInStock: this.$store.getters.productIsInStock
};
}
答案 1 :(得分:0)
让我看看我是否理解您的疑问。
productIsInStock是一个吸气剂,它返回一个箭头函数,并且vue通过模板部分在render函数中对此进行评估:
<button
@click="addProductToCart(product)"
:disabled="!productIsInStock(product)">
Add product to cart
</button>
首先重要的是要了解,由于:disable databind,vue将值评估为javascript。因此,它将计算getter的实际值(即一个函数),然后您调用返回某物的实际返回值(请记住,是一个函数)。
以另一种方式输入:每当相关状态发生变化时都会调用吸气剂,以重新计算值,这就是为什么您使用吸气剂(如this.getterA + this.getterB
)而不调用吸气剂(如{{1})的原因}。
如果您仍然不了解,请检查我的“假”渲染功能,以代替模板渲染:
this.getterA() this.getterB()
这也被称为函数式编程语言中的curring。