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フッターを配置する簡単な方法

推薦する

WebpackはCSSファイルを読み込み、その設定方法

webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...

写真をアップロードして顔を認識する Vue+axios サンプルコード

目次Axios リクエストQs処理データ分析Vantアップロードファイル形式完全なコードこの記事では...

ノードを使用して静的ファイルキャッシュを実装する方法

目次キャッシュキャッシュ位置の分類キャッシュ設定ヘッダーNodeは静的ファイルキャッシュを実装する強...

vue3 を使用したジグソーパズルゲームのリファクタリングの例

序文プロジェクト内のパズルゲーム(デジタル華容路とも呼ばれる)を再構築するのに 2 日かかりました。...

MySQL 1対多関連クエリのページングエラー問題の解決方法

XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...

JavaScript は、マウスがテーブル行を通過するときに色の識別を実装します。

この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...

Vue でのルーティングガードの具体的な使用法

目次1. グローバルガード1.1 グローバルフロントガード1.2 グローバルポストルートガード1.3...

Mysqlがデータベースに接続するときのホストとユーザーのマッチングルールについての簡単な説明

--データベースに接続するとき、ホストとユーザーのマッチングルール公式ドキュメント: https:/...

MySQL の日付関数と日付変換およびフォーマット関数

MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...

WeChatアプレットのスケルトン画面の実装例

目次スケルトンスクリーンとはアプレットでスケルトン画面を生成する方法導入方法表示と非表示ユーザーエク...

反応自動構築ルーティングの実装

目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...

JavaScript フォーム検証の例

HTML フォームは、名前、電子メール アドレス、場所、年齢などのユーザー情報を収集するためによく使...

VScode リモート SSH リモート編集とデバッグコード

Visual Studio Code の最新の Insider バージョンには、コードのリモート デ...

JavaScriptがDOMツリーの構築にどのように影響するかについて詳しく説明します。

目次ドキュメント オブジェクト モデル (DOM) DOM と JavaScript DOMツリーの...

シリアルポート使用時のvue-electronの問題解決

エラーは次のとおりです:キャッチされない TypeError: 未定義のプロパティ 'mod...