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 を応援していただければ幸いです。

以下もご興味があるかもしれません: