Vueプロジェクトでvuexを使用する方法

Vueプロジェクトでvuexを使用する方法

Vuex とは何ですか?

ヒント👉 公式ウェブサイトの説明: Vuex は、Vue.js アプリケーション専用に開発された状態管理モードです。集中型ストレージを使用してアプリケーションのすべてのコンポーネントのステータスを管理し、対応するルールを使用して、ステータスが予測可能な方法で変更されるようにします。

複数のページでデータを共有する必要がある場合は、Vuex を使用できます。例えば:

  • ユーザーの個人情報管理モジュール。
  • 注文チェックアウトページからクーポン選択ページに移動し、クーポンページを選択します。選択したクーポン情報を保存するには?クーポン情報はステートに格納されます。クーポンが選択されるとミューテーションが送信されます。注文決済ページでは選択されたクーポンが取得され、注文割引情報が更新されます。
  • ショッピング カート モジュールは、毎回インターフェースを呼び出してショッピング カートの数を取得します。効果は得られますが、各 HTTP リクエストはブラウザーのパフォーマンスを消費します。
  • 私の注文モジュールでは、注文リストをクリックして注文をキャンセルし、対応する注文リストを更新します。この場合、Vuex は状態を保存し、この状態を監視し、変更があった場合に対応するリストを更新するためにも使用されます。

Vuex の基本的な考え方は Flux と Redux から借用されています。他のモードとは異なり、Vuex は、Vue.js のきめ細かいデータ応答メカニズムを利用して効率的な状態更新を行うために、Vue 専用に設計された状態管理ライブラリです。

Vuex 使用サイクル図

私のストアディレクトリ

  • モジュールはさまざまなモジュールを格納するために使用されます
  • action-types.jsは、簡単な管理、文字列マッピング、標準化された管理を実現します。
  • また、mutation-types.js は管理を容易にします。多数の機能モジュールが混在すると、どれほど問題になるか想像してみてください。
  • インデックス

vuexの例の実装

これらのファイルを作成しましょう

アクションタイプ.js

// ユーザー情報を取得する export const QUERY_USER_INFO = "QUERY_USER_INFO"

変異タイプ.js

// ユーザー情報を設定する export const SET_USER_INFO = 'SET_USER_INFO'

モジュールの下にbase.jsファイルを作成する

ベース

'../action-types' から { QUERY_USER_INFO } をインポートします。
'../mutation-types' から { SET_USER_INFO, SET_CUR_MENU_ID } をインポートします。
'@/assets/js/api.js' から api をインポートします。

// 状態を作成する
定数状態 = {
    // ユーザー情報 userInfo: {},
}

// データを非同期的に取得し、ミューテーションにコミットし、ミューテーションによって状態が変化する
定数アクション = {
    /* ユーザー情報を取得する */
    [QUERY_USER_INFO] ({ コミット }, パラメータ) {
        戻り値 api.get({
                URL: '/system/getUser',
            }, params.vm).then(データ => {
                コミット(SET_USER_INFO、データ)
                データを返す
        })

    }

}

const ゲッター = {
    // 現在のユーザー情報 userInfo: state => state.userInfo
}

// 同期的に取得 const 変異 = {
    [SET_USER_INFO] (状態、データ) {
        state.userInfo = データ
    }
}


エクスポートデフォルト{
    州、
    行動、
    ゲッター、
    突然変異
}

インデックス

「vue」からVueをインポートします
「vuex」からVuexをインポートします
「./modules/base.js」からベースをインポートします。

Vue.js で Vuex をビルドします。

デフォルトの新しいVuex.Storeをエクスポートします({
    モジュール:
        ベース
    }
})

ヘッダー.vue

<span>{{$store.getters.userInfo.name}}</span>

メイン.js

'vue' から Vue をインポートします
'./store' からストアをインポートします
'@/store/action-types.js' から { QUERY_USER_INFO } をインポートします。

store.dispatch(QUERY_USER_INFO, {}).finally(() => {
    新しいVue({
        ルーター: ルーター(ストア)、
        店、
        レンダリング: h => h(App)
    }).$mount('#app')
})

要約する

Vue プロジェクトで vuex を使用する方法についての記事はこれで終わりです。Vue プロジェクトで vuex を使用する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  Dockerを使用してMySQL 8.0をデプロイする方法の例

>>:  MySQLのGROUP BYステートメントを最適化する方法

推薦する

IE6では画像要素imgに余分な空白スペースがある

ページの DIV+CSS レイアウトを行う際、IE6 で画像要素 img の下に余分なスペースができ...

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...

CentOS 7.2 に SuPHP をインストールするための詳細な手順

デフォルトでは、CentOS 7 上の PHP は apache または nobody として実行さ...

MySQL 8.0 バージョンで getTables がすべてのデータベース テーブルを返す問題の簡単な分析

序文この記事では、主にライブラリ内のすべてのテーブルを返すMysql8.0ドライバgetTables...

show processlist コマンドによる MySQL パフォーマンス検査の説明

show processlist コマンドは非常に便利です。MySQL の実行が 50% 以上になる...

SSL で Nginx リバース プロキシを構成する簡単な手順

序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...

Dockerで最もよく使われるイメージコマンドとコンテナコマンドの詳細な説明

この記事では、Docker の使用で最もよく使用されるイメージ コマンドとコンテナ コマンドを一覧表...

Vue での props の使い方の紹介

序文: Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...

mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し

1. ユーザーを作成します。注文: 'password' によって識別される ...

分散ロックの原理と3つの実装方法の詳細な説明

現在、ほぼすべての大規模な Web サイトとアプリケーションは分散方式で展開されています。分散シナリ...

MySQL データベースの最適化に関する 9 つのヒント

目次1. 最も適切なフィールド属性を選択する2. フィールドをNOT NULLに設定してみる3. サ...

Angularコンポーネント投影の詳細な説明

目次概要1. 簡単な例1.サブコンポーネントの<ng-content>ディレクティブを使...

jsの継承の6つの方法を詳しく解説

プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...

MySQL (5.6 以下) の JSON 解析の詳細な例

MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...

Windows 10 に付属する仮想マシンのネットワークを設定するための詳細な手順 (グラフィック チュートリアル)

1. サーバー ホストをクリックし、右側の操作リストで [仮想スイッチ管理] をクリックして、仮想...