Vuex でゲッターとアクションを使用するための追加手順

Vuex でゲッターとアクションを使用するための追加手順

予備的注釈

1.Vue2.xとVue3.xの違い:

  • Vue 3.x にはヘルパー関数はありません。
  • Vuex のその他の使用方法には違いはありません。

2. ここでは、Vuex のいくつかの属性の使用を拡張および補足するだけです。

ゲッターが追加されました

ゲッターがサブモジュールに記述されている場合、ゲッター属性のメソッドには合計4つのパラメータがあります。

ゲッター: {
	/**
	  * パラメータの説明:
	  * 状態: 現在のモジュールの状態を表します
	  * getters: 現在のモジュール内の getters オブジェクトを表します。通常は同じレベルの他のメソッドです。 * rootState: メイン モジュールの状態オブジェクトを表します。 * rootGetters はメイン モジュールの getters オブジェクトを表します。 *
	  * メインモジュールは - index.js */  
	getName(状態、ゲッター、ルート状態、ルートゲッター){
		// 手順 // 状態とゲッターは直接呼び出すことができます // rootState.モジュール名.属性名 // rootGetters['モジュール名/このサブモジュール下のゲッターメソッド名']
		//状態を除く他のすべての関数は命名規則に準拠した [''] を使用します },
	.......
}

追加されたアクション

アクションがサブモジュールに記述されている場合、アクション メソッドの最初のパラメータcontextオブジェクトには 6 つのオブジェクトが含まれます (他のプロパティもありますが、開発者が使用できるのはこれら 6 つだけです)。

意味

// サブモジュール内のアクション
アクション: {
	/**
	  * パラメータ1: contextはオブジェクトです。現在のアクションがサブモジュールで定義されている場合、 
	  * コンテキストには開発者が使用できる次の 6 つのオブジェクトがあります * 
	  * 1. コミット: ミューテーションを呼び出す
	  * (1). このモジュールは、commit('このモジュールのミューテーションメソッド名', 実際のパラメータ) を呼び出します。
	  * (2). 他のモジュールの呼び出し: commit('モジュール名/他のモジュールのミューテーションメソッド名', 実パラメータ, {root: true}),
	  * {root:true} 固定パラメータ、メインモジュールとして呼び出すことを意味します * 2. state: 現在のモジュールの状態を取得します
	  * 3. ディスパッチ: アクションメソッドを呼び出す * (1). このモジュールは、dispatch('このモジュールのアクションメソッド名', 実際のパラメータ) を呼び出します。
	  * (2). 他のモジュールからの呼び出し: dispatch('モジュール名/他のモジュールのアクションメソッド名', null, {root: true})
	  * 4. ゲッター: 現在のモジュールのゲッターを取得します 
	  * 5. rootState: メインモジュールの下の状態
	  * 6. rootGetters: メインモジュール下のゲッター
	  *
	  * パラメータ 2: 値はコンポーネントを呼び出すときに渡されるパラメータです */
	refreshUserName(コンテキスト、値){
	    タイムアウトを設定します(()=>{
           store.commit('mutations メソッド名', 実際のパラメータ値)  
       },2000)
	}
}

呼び出し (Vue3.x)

'vuex' から {useStore} をインポートします。
設定(){
    定数ストア = useStore()
    // ストア === this.$store
    store.dispatch('モジュール名/アクションメソッド名', パラメータ値)
}

開発中に上記の6つのオブジェクトを使用する場合は、 context.分解を通じて直接取得することもできます。

以下は公式サイトからの例です。

上記は、Vuex でのゲッターとアクションの使用に関する補足説明の詳細な内容です。Vuex でのゲッターとアクションの使用に関するより詳しい補足情報については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • vuex でデータインスタンスを要求する vue のアクション
  • 状態を非同期に変更する vuex アクションの詳細な例
  • Vuexのアクション属性の具体的な使用法
  • Vuex学習におけるアクションの使用方法の詳細な説明
  • Vuex でのアクションの使用に関する詳細なチュートリアル

<<:  Linux SecureCRT の文字化けの解決方法

>>:  MySQL の 3 つの Binlog 形式の概要と分析

推薦する

CSS における z-index: 0 と z-index: auto の違い

最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...

Linux CentOS インストール JDK および Tomcat チュートリアル

まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...

IDEA の Docker プラグインを介して SpringBoot プロジェクトをデプロイするプロセスの詳細な説明

1. Dockerリモート接続ポートを設定するサーバー上の docker.service ファイルを...

MYSQL トランザクション チュートリアル Yii2.0 マーチャント引き出し機能

序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...

MySQLサブクエリでorder byが効かない問題の解決方法

偶然にも、SQL ステートメントを異なる MySQL インスタンスで実行すると、異なる結果が生成され...

HTML文書の基本構造(Webページ作成の基礎知識)

HTMLの動作原理: 1. ローカル操作: ブラウザでhtmlファイルを開く2. リモートアクセス...

MySQL でのワイルドカードを使用したファジークエリの実装に関する簡単な説明

MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

要素を中央に配置するための配置方法 (Web ページ レイアウトのヒント)

ブラウザウィンドウの中央に要素を配置する方法まず、コード ブロックを示します。すでにコードを理解して...

Vueはファイルのアップロードとダウンロードを実装します

この記事では、参考までにVueのファイルのアップロードとダウンロードの具体的なコードを紹介します。具...

MySQL で絵文字表現を挿入できない理由と解決策

失敗のシナリオMySQL データベースに絵文字表現を挿入するために JDBC を呼び出すと、例外ja...

MySQLの暗黙的な変換について話す

作業の過程で、暗黙的な変換が発生するケースが数多くあります。暗黙的な変換は、クエリの速度低下を引き起...

HTMLリンクを書くときは、HTTPリクエストを減らすためにサブフォルダに必ずスラッシュを追加してください。

サブフォルダーの末尾にスラッシュがない場合、2 つの HTTP リクエストが生成され、効率に影響しま...

jQuery エディタ プラグイン tinyMCE の使い方

簡略化されたファイル サイズを変更し、サンプルをダウンロードします。ファイルをローカル コンピュータ...