Question

我一直在观看一门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语句中如何工作。我试图在控制台中重复相同的结构，但是由于某种原因，它根本不起作用。希望我提供了足够的代码

Answer 1

您可以在商店中将吸气剂定义为函数。该函数与状态，其他获取器一起调用（在模块的情况下，也与根状态和根获取器一起调用）。基于此，您将返回一些值。通常，该数据是某个值（例如，对象，数字，布尔值等）

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
  };
}

Answer 2

让我看看我是否理解您的疑问。

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。

从Vuex Storage Getter返回箭头功能：不了解

2 个答案: