Функция возврата стрелки из получателя памяти Vuex: Не понимаю

Question

Я наблюдал за одним курсом Vuex, и до сих пор все было хорошо, пока они не включили функцию стрелки в геттер, а затем не использовали ее в вычисляемом свойстве и действии.Код следующий:

структура элемента:

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

Это полностью работает, но я не понимаю почему.Главным образом я не понимаю, как этот геттер работает как в вычисляемом, так и в операторе if.Я попытался повторить ту же структуру в консоли, но по какой-то причине это не сработало вообще.Надеюсь, я предоставил достаточно кода

Answer 1

Дайте мне посмотреть, понимаю ли я ваше сомнение.

productIsInStock - метод получения, который возвращает функцию стрелки, и vue оценивает ее в функции визуализации через часть шаблона:

<button
     @click="addProductToCart(product)"
     :disabled="!productIsInStock(product)">
       Add product to cart
</button>

Во-первых, важно понять, что vue, благодаря: отключить привязку данных, оценивает значение как javascript.Таким образом, он вычисляет фактическое значение получателя (то есть функции), и вы вызываете фактическое возвращаемое значение (помните, это функция), которые возвращают что-то.

Поместите по-другому: метод получателя вызывается каждый разэто связанное состояние изменяется, чтобы пересчитать значение, поэтому вы используете геттер (как в this.getterA + this.getterB) и не вызываете геттер (как this.getterA() this.getterB()).

Если вы все еще не понимаете,проверьте мою «поддельную» функцию рендеринга, которая заменяет рендеринг шаблона:

let productIsInStock = () => product => { ... }

render(h) {
 return h('button', {
   '@click': () => this.addProductToCard(product),
   ':disabled': () => productIsInStock()(product), // using arrow fn instead of the getter
 }
}

Это также известно как каррирование в функциональном языке программирования.

Answer 2

Вы определяете геттеры в своем магазине как функцию. Эта функция вызывается с состоянием, другими получателями (а в случае модуля также корневым состоянием и корневыми получателями). Исходя из этого, вы возвращаете некоторое значение. Обычно эти данные представляют собой некоторое значение (например, объект, число, логическое значение и т. Д.)

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 в компоненте обеспечивает (в данном случае) функцию получения для некоторых атрибутов. В вашем примере он возвращает то, что возвращает получатель в вашем магазине, а именно функцию. Поскольку это функция, вы можете вызвать ее.

В этом случае реактивность не происходит, поэтому вы также можете написать следующее:

data () {
  return {
    productIsInStock: this.$store.getters.productIsInStock
  };
}