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 形式の概要と分析

推薦する

オンラインMySQLオプティマイザの誤判断によって発生した低速クエリイベントを記録する

序文:非常に遅いクエリとリクエストのタイムアウトのアラートを受け取りました。メトリックを通じて My...

最新の人気スクリプトAutojsソースコード共有

今日は、最新の人気スクリプト 50 個を含むソース コードを共有します。現在、Mine Guard ...

MySQL の日付と時刻関数の概要 (MySQL 5.X)

1. MySQLは現在の日付と時刻を取得する関数1.1 現在の日付 + 時刻 (日付 + 時刻) ...

ラムダ式の原則と例

ラムダ式ラムダ式 (クロージャとも呼ばれる) は、Java 8 のリリースを推進した最も重要な新機能...

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...

進捗バーのネイティブ JavaScript 実装

進捗バーを実装するためのJavaScriptの具体的なコードは参考までに。具体的な内容は次のとおりで...

Mapper SQL ステートメント フィールドとエンティティ クラス属性名の関係は何ですか?

背景: 1. データベースに通知テーブルがある あなたは見ることができますgmt_create、通知...

CentOS 7にDockerをインストールする

Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....

CentOS の起動時に RabbitMq ソフトウェアを自動的に起動する方法

1. /etc/init.dディレクトリに新しいrabbitmqを作成します。 [root@loca...

js 属性オブジェクトの hasOwnProperty メソッドの使用

オブジェクトの hasOwnProperty() メソッドは、オブジェクトに特定の独自の (継承され...

MySQL がエラーを報告: ファイルが見つかりません: './mysql/plugin.frm' 解決策

問題を見つける最近、仕事中に問題が見つかりました。問題は、MySQL ディスクがいっぱいだったことで...

Nginx 正規表現関連のパラメータとルールの紹介

序文最近、私はクライアントのサーバー構成を支援しており、Nginx 構成ファイルを頻繁に変更していま...

ウェブページをデザインする際に注意すべきいくつかの問題

Web デザインは、個人の好みや Web ページの内容に応じて、デザインのレイアウトが常に変化します...

JavaScript を使用してページに動的な検証コードを実装する例

導入:現在、プログラム攻撃を防ぐために、ユーザーがログインまたは登録するときに多くの動的検証テクノロ...

この記事ではSQL CASE WHENの使い方を詳しく説明します

目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...