Vue フロントエンド開発補助機能状態管理詳細例

マップ状態

コンポーネントが複数の状態を取得する必要がある場合、これらすべての状態を計算プロパティとして宣言すると、多少の繰り返しと冗長性が生じます。この問題を解決するには、計算されたプロパティを生成する mapState ヘルパー関数を使用します。 mapState が使用されていない場合、オブジェクトの状態は通常、使用されているコンポーネントの computes プロパティから取得され、次のように使用されます。

  //....
  計算: {
        カウント: 関数(){
            this.$store.state.count を返します
        }
    }
 //....

mapState を使用すると、次のように簡略化できます。

import { mapState } from 'vuex' //mapStateオブジェクトを導入する export default {
  // ...
  計算: mapState({
    // 矢印関数はコードをより簡潔にすることができます count: state => state.count,
  })
}
または import { mapState } from 'vuex' //mapStateオブジェクトを導入 export default {
  // ...
  計算: mapState({
    'count'、//状態名 countAlias と一致する: 'count' //countAlias は参照コンポーネントで使用されるエイリアスです})
}

マップゲッター

mapGetters ヘルパー関数は、state と同様に、ストア内のゲッターをローカルの計算プロパティにマップするだけです。計算関数のコードは次のように簡略化されます。

'vuex' から { mapGetters } をインポートします。
エクスポートデフォルト{
  // ...
  計算: {
  // オブジェクトスプレッド演算子を使用して、計算されたオブジェクトにゲッターを混ぜます...mapGetters([
      'countDouble',
      'CountDoubleAndDouble',
      //..
    ])
  }
}

MapGetters ではエイリアスも使用できます。

マップミューテーション

mapMutations ヘルパー関数を使用して、コンポーネント内のメソッドを store.commit 呼び出しにマップします。簡略化されたコードは次のとおりです。

'vuex' から { mapMutations } をインポートします。
エクスポートデフォルト{
  //..
  メソッド: {
    ...mapMutations([
      'increment' // this.increment() を this.$store.commit('increment') にマップします
    ]）、
    ...mapMutations({
      add: 'increment' // this.add() を this.$store.commit('increment') にマップします
    })
  }
}

マップアクション

mapActions ヘルパー関数を使用して、コンポーネントメソッドを store.dispatch 呼び出しにマップします。簡略化されたコードは次のとおりです。

'vuex' から { mapActions } をインポートします。
エクスポートデフォルト{
  //..
  メソッド: {
    ...マップアクション([
      'incrementN' // this.incrementN() を this.$store.dispatch('incrementN') にマップします
    ]）、
    ...マップアクション({
      add: 'incrementN' // this.add() を this.$store.dispatch('incrementN') にマップします
    })
  }
}

例

Vue 状態管理 (II) の例に従って、これは補助関数を使用して実行されます。補助関数は CountChange および ComputeShow コンポーネントで使用され、残りのコードを変更する必要はありません。
ComputeShowでは、mapStateとmapGettersという2つの補助関数が使われています。コードは次のようになります。

<テンプレート>
  <div align="center" style="background-color: ビスク;">
    <p>以下は、computed を使用してストア内のステータスデータを直接取得し、ステータスデータが変更されたときに同期的に更新する方法です。</p>
    <h1>状態を受け取るには computed を使用します: {{ computedState }}</h1>
    <h1>getter を受け取るには computed を使用します: {{ computedGetters }}</h1>
  </div>
</テンプレート>
<スクリプト>
  import { mapState,mapGetters } from 'vuex' //mapState、mapGetters オブジェクトを導入 export default {
    名前: 'ComputeShow',
    計算:{
    ...mapState({
      computedState:'count' //エイリアス: computedState
    }）、
    ...mapGetters({
      computedGetters:'getChangeValue' //エイリアス: computedGetters
    })
    }
  }
</スクリプト>
<スタイル>
</スタイル>

マップを使用するときは、ストアのコンテンツから切り離されるようにエイリアスを追加することをお勧めします。 CountChangeでは、mapMutationsとmapActionsという2つの補助関数が使用されています。コードは次のとおりです。

<テンプレート>
  <div align="center">
    <input type="number" v-model="paramValue" />
    <button @click="addNum({res: parseInt(paramValue)})">+増加</button>
    <button @click="subNum">- 減少</button>
  </div>
</テンプレート>
<スクリプト>
  輸入 {
    マップミューテーション、
    マップアクション
  } from 'vuex' //mapMutations、mapActionsオブジェクトを導入 export default {
    名前: 'CountChange',
    データ（） {
      戻る {
        パラメータ値: 1,
      }
    },
    メソッド: {
      ...mapMutations({
        subNum: 'sub' //別名subNumを追加
      }）、
      ...マップアクション({
        addNum: 'increment' // this.incrementN() を this.$store.dispatch('incrementN') にマップします
      })
    }
  }
</スクリプト>
<スタイル>
</スタイル>

同様に、ストア内のメソッドにエイリアスを付け、パラメータを渡す必要がある場合は、エイリアスを介してアクションまたはミューテーションに渡します。たとえば、「addNum({res: parseInt(paramValue)})」はオブジェクト {res: ''} を送信します。