vue-computed-helpersを使用して一般的なVue.jsの計算プロパティを簡素化する

投稿日: 2022-04-20 2022-10-15
タグ: Vue.js

VueのComputedProperties は、開発時間を大幅に短縮する驚くべきイノベーションです。それらの最も一般的な使用法のいくつかは、いくつかのデータ構造の「ローカルレデューサー」です。（たとえば、配列から特定の要素を引き出したり、その長さを見つけたり、要素の数を数えたりするなどです。）このためのコードは特に複雑ではありませんが、持っているのはかなり面倒です。いつも書く。 vue-computed-helpers は、単純なワンライナーのセットを使用して、これらのユースケースの多くを処理します。

インストール

インストール vue-computed-helpers Vue.jsプロジェクトで。

糸を使用している場合：

yarn add vue-computed-helpers

NPMの場合：

npm install vue-computed-helpers --save

使用法

vue-computed-helpers テンプレートに自動的に更新されるバインディングを作成するために使用できる、以下に説明するいくつかの簡単なヘルパーメソッドを提供します。

例えば：

Example.vue

<template>
  <div class="alligator-information">
    <p>There are {{numberOfHappy}} happy alligators.</p>
    <div v-for="alligator of alligators">
      <p>Name: {{alligator.name}}</p>
      <p>Weight: {{alligator.weight}}</p>
    </div>
  </div>
</template>

<script>
import { filter, count } from 'vue-computed-helpers';

export default {
  data() {
    return {
      alligators: [
        {
          name: "Betty",
          weight: 850,
          isHappy: true
        },
        {
          name: "Thompson",
          weight: 792,
          isHappy: false
        },
        {
          name: "Hubert",
          weight: 927,
          isHappy: true
        }
      ]
    }
  },

  computed: {
    happyAlligators: filter('alligators', 'isHappy', true),
    // It's easy to build chains!
    numberOfHappy: count(happyAlligators)
  }
}
</script>

利用可能なヘルパーの完全なリストについては、メインリポジトリを参照してください。

ほとんどの場合、ほとんどのユースケースは組み込みのJS配列関数で処理できますが、これらのいくつかは役立つ場合があります。楽しみ！

getdocs

13036