Vuex のコアコンセプトと基本的な使用法の詳細な説明

Vuex のコアコンセプトと基本的な使用法の詳細な説明

導入

Vuex はコンポーネントのグローバルな状態 (データ) を管理するための仕組みで、コンポーネント間のデータ共有を簡単に実現できます。

始める

インストール

①直接ダウンロードする方法

vuex.js ファイルを作成し、URL https://unpkg.com/vuexの内容をフォルダーに配置します。

②CND法

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

③NPM方式

npm インストール vuex --save

④糸法

糸を追加するvuex

NPMインストールの使い方

1. scr ファイルに store/index.js フォルダーを作成し、次の内容を記述します。

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
Vue.use(Vuex)
デフォルトの新しいVuex.Storeをエクスポートします({
州: {}、
変異: {},
アクション: {},
モジュール: {}
})

2. main.jsにインポートし、Vueインスタンスにマウントします。

'vue' から Vue をインポートします
'./store' からストアをインポートします
新しいVue({
  レンダリング: h => h(App),
  店
}).$mount('#app')

店舗コンセプトと利用方法

コンセプト:

コンポーネント間でデータを共有するために使用されます。

ストア内のデータを変更できるのはミューテーションのみです。

使用:

使用前に定義する

意味

州: {
  番号: 0
}

使用

方法1(推奨)

<div>{{ numAlias ​​}}</div>

'vuex' から { mapState } をインポートします。
エクスポートデフォルト{
  //計算関数が計算されます: mapState({
    // 文字列パラメータ 'count' を渡すことは `state => state.count` と同等です
    numAlias: 'num', // 共通キーは自分で付ける名前、値は受け取るデータです // 矢印関数を使用するとコードをより簡潔にすることができます count: state => state.count,
    // `this` を使用してローカル状態を取得できるようにするには、通常の関数 countPlusLocalState (state) { を使用する必要があります。
      state.count + this.localCount を返す
    }
    //他の計算関数を定義することもできます}),
  // または次のように // 計算された関数は次のように計算されます: {
    mapState(['count'])
  }
}

方法2

<div>{{ $store.state.count }}</div>

突然変異の概念と使用法

コンセプト:

ストア内のデータを変更します。他の場所のデータの変更は厳禁です。ミューテーションでは非同期操作を実行しないでください。

ミューテーションは同期的に実行する必要があり、非同期的に実行することはできません。

使用:

使用する前にメソッドを定義する

意味

突然変異:
	//カスタムメソッドを増分します。ストアパラメータはストアデータ、パラメータパラメータは受信データです。増分しません (状態、パラメータ) {
        // 状態の変更 state.num++
    }
}

使用

方法1(推奨)

'vuex' から { mapState, mapMutations } をインポートします。
//メソッド: {
	...mapMutations([
	    // ミューテーションカスタムメソッド名 'increment'
    ])、
    愛() {
    	// 直接 this.increment('渡す必要のあるデータは必要ありません') を呼び出します
        this.increment('ビン')
    }
}

方法2

メソッド: {
    愛() {
    	// this.$store.commit('カスタム名', '渡されたデータは渡されない可能性があります')
    	this.$store.commit('増分', 'データ')
    }
}

アクションの概念と使用法

コンセプト:

非同期操作を処理するために使用されます。

非同期操作を通じてデータを変更する場合は、ミューテーションではなくアクションを使用する必要があります。ただし、アクションでミューテーションをトリガーして間接的にデータを変更する必要があります。

アクションは、次の点を除いて、ミューテーションに似ています。

  • アクションは、データ (ステータス) を直接変更するのではなく、ミューテーションを送信します。
  • アクションには任意の非同期操作を含めることができます。

意味

突然変異:
	//カスタムメソッドを増分します。ストアパラメータはストアデータ、パラメータパラメータは受信データです。増分しません (状態、パラメータ) {
        // 状態の変更 state.num++
    }
},
アクション: {
	//カスタムメソッドを追加します。コンテキストはパラメータなので、vuexのインスタンスとして扱うことができます。add(context) {
    	//context.commit('ミューテーションで呼び出されるメソッド') を使用できます
    	context.commit('増分')
    }
}

使用

方法1(推奨)

'vuex' から { mapState、mapMutations、mapActions } をインポートします。
エクスポートデフォルト{
  メソッド: {
    ...マップアクション([
      'add', // `this.add()` を `this.$store.dispatch('add')` にマップします
      // `mapActions` はペイロードもサポートします:
      'add' // `this.add(amount)` を `this.$store.dispatch('add', amount)` にマッピングします
    ])、
    ...マップアクション({
      add: 'add' // `this.add()` を `this.$store.dispatch('increment')` にマップします
    })、
    愛() {
    	// this.add('渡す必要のあるデータは必要ありません') を直接呼び出します
    	this.add(データ)
    }
  }
}

方法2

メソッド: {
    愛() {
    	// this.$store.dispatch('カスタム名', '渡されたデータは渡されない可能性があります')
    	this.$store.dispatch('add', データ)
    }
}

ゲッターの概念と使用

コンセプト:

Getter は、ストア内のデータを処理して新しいデータを作成するために使用されます。 Getting は、Vue の計算省略形と同様に、ストア内の既存のデータを処理して新しいデータを形成できます。

意味

州: {
  番号: 0
},
ゲッター: {
    完了Todos: 状態 => {
    	状態.num = 10 を返す
    }
}

使用

方法1(推奨)

<div>{{ 完了したすべての作業 }}</div>

'vuex' から { mapState、mapMutations、mapActions、mapGetters } をインポートします。
エクスポートデフォルト{
  //計算関数が計算されます: {
  	...mapState(['count'])、
  	...mapmapGetters(['doneTodos'])
  }
}

方法2

<div>{{ $store.getters.doneTodos }}</div>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vuex の使い方入門チュートリアル
  • まだvuexをお使いですか?piniaについて学ぶ
  • Vuex でのアクションの使用に関する詳細なチュートリアル
  • VueXのインストールと使用方法の基本チュートリアル
  • Vue学習におけるVuexの使用の詳細な説明
  • Vuexの特性と機能の詳細な説明
  • Vueプロジェクトでvuexを使用する方法
  • Vuex全体のケースの詳細な説明
  • Vuexの役割についての深い理解
  • 1 つの記事で Vuex を理解する
  • Vuex の詳細な紹介と使用方法

<<:  Chromeブラウザ設定の新バージョンではクロスドメイン実装が可能

>>:  ページの下部にHTMLフッターを配置する簡単な方法

推薦する

MySQLインストーラがコミュニティモードで実行されている場合の解決策

今日、リモートデスクトップを実行してログインしているときにこのプロンプトを見つけました「MySQL ...

Linux システムでのルート ディレクトリ拡張の概要

1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...

MySQL SQL ステートメントが遅い場合の一般的な原因と解決策

1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...

HTML コメント HTML 内のテキストコメントをマークするための記号

HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...

モバイル アプリのユーザー インターフェース設計に関する 10 のヒント

ヒント1: 集中力を保つ最高のモバイル アプリは、1 つのことを非常にうまく行うことに重点を置いてい...

MySQLはパスワードなしでログインする例を実装しています

具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...

VUEトークンの無効化プロセスの詳細な説明

目次ターゲット思考分析コード着陸要約するターゲットトークンの有効期限切れシナリオの処理トークンは、ユ...

Node.js管理ツールnvmの詳細なインストール手順

いいえnvmはnodejsの複数のバージョンを管理する役割を担っています。インストール: https...

Mysqlマスタースレーブ同期の実装原理

1. MySQL マスター/スレーブ同期とは何ですか?マスター データベースのデータが変更されると、...

js のマクロタスクとマイクロタスクについての簡単な説明

目次1. JavaScriptについて2. JavaScript イベントループ3. マクロタスクと...

Dockerのヘルス検出メカニズム

コンテナの場合、最も単純なヘルスチェックはプロセス レベルのヘルスチェックであり、プロセスが稼働して...

MySQL 5.7.20 圧縮版のダウンロードとインストールの簡単なチュートリアル

1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...

hrefを使用すると、リンクをクリックするだけでページ上の特定の場所にジャンプできます。

ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...

Dockerの急速な拡張の高度な方法

1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...

Hadoop 2.Xの新機能、ごみ箱機能の説明

ごみ箱機能をオンにすると、削除されたファイルの元のデータをタイムアウトなしで復元できるため、誤って削...