Vuexの役割についての深い理解

概要

vue.js を使用したことがある人なら、vue コンポーネント間で値を渡すことの苦労を知っているはずです。親子や兄弟コンポーネントに基づいて値を渡すのは非常に便利ですが、無関係なコンポーネントが同じデータセットを使用したい場合は、非常に無力に思えます。Vuex はこの問題を非常にうまく解決します。そのため、Vuex は習得しておく必要があり、面接に行くときにも必ず聞かれる質問です。次に、vuex がコンポーネントのステータスをどのように管理しているかを簡単に紹介します。

コンポーネント間でデータを共有する方法

親から子に値を渡す: v-bind 属性バインディング、props 受信; $parent / $children; $refs; $attrs / $listeners;

子が親に値を渡します: v-on イベント バインディング、$emit トリガーと組み合わせる; $parent / $children;

兄弟コンポーネント間でデータを共有する: EventBus; Vuex

• $on データを受信するコンポーネント
• $emit データを送信するコンポーネント

Vuex の原則の紹介

Vuex は一方向のデータフローを実装し、データを格納するためのグローバル状態を備えています。コンポーネントが状態内のデータを変更する場合は、ミューテーションを通じて行う必要があります。ミューテーションは、外部プラグインが呼び出して状態データの更新を取得するサブスクライバー モードも提供します。すべての非同期操作 (多くの場合、バックエンド インターフェイスを呼び出して非同期でデータを取得するために使用) またはバッチ同期操作がアクションを経由する必要がある場合、アクションは状態を直接変更できません。ミューテーションでメソッドをトリガーし、その後ミューテーションで状態データを変更する必要があります。データが変更されると、それに応じてコンポーネントにプッシュされ、コンポーネントがビュー上で再レンダリングされます。

Vuex は Vue の状態マネージャーであり、保存されたデータは応答性があります。ただし、保存されません。リフレッシュ後、初期状態に戻ります。具体的な方法は、vuex 内のデータが変更されたときに、データをコピーして localStorage に保存します。リフレッシュ後、localStorage に保存されたデータがある場合は、それを取り出してストア内の状態を置き換えます。

Vuexはコンポーネントのグローバル状態（データ）を管理するためのメカニズムです。

コンポーネント間でデータを共有するのは簡単です

Vuex を使用して状態を統一的に管理する利点:

• Vuexで共有データを集中管理できるため、開発とメンテナンスが容易になります。
• コンポーネント間のデータ共有を効率的に実現し、開発効率を向上
• Vuex に保存されたデータは応答性が高く、データとページをリアルタイムで同期させることができます。

Vuexに保存するのに適したデータの種類

一般的に言えば、コンポーネント間で共有されるデータのみを Vuex に保存する必要があります。コンポーネントのプライベート データは、コンポーネント独自のデータに保存できます。

• 複数のビューが同じ状態に依存します。たとえば、データは複数のコンポーネント間で共有され、ユーザー情報は異なるページで取得できます。
• 異なるビューからの動作は同じ状態を変更する必要があります。たとえば、ユーザーのメンバーシップ情報は異なるページで変更できます。

Vuexの基本的な使い方

1. Vuex依存パッケージをインストールする

npm インストール vuex --save

このパッケージは実稼働環境でも使用されるため、必ず –save を追加してください。

2. Vuexパッケージをインポートする

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
// ヴュークス山
Vue.use(Vuex)

3. ストアオブジェクトを作成する

定数ストア = 新しい Vuex.Store({
  // 状態はグローバルに共有されるデータ状態を格納します: {
    カウント: 0
  }
})
デフォルトストアをエクスポートします。

4. ストアオブジェクトをvueインスタンスにマウントする

新しいVue({
    el: '#app',
    レンダリング: h => h(app),
    ルーター、
    // 作成した共有データオブジェクトを Vue インスタンスにマウントします // すべてのコンポーネントはストアからグローバルデータを取得できます
})

Vuexの主なコアコンセプト

1. 州データウェアハウス

State は一意のパブリック データ ソースを提供し、共有されるすべてのデータはストアの State に保存されます。

コンポーネントがState内のデータにアクセスする最初の方法: this.$store.state.globalデータ名

コンポーネントが State 内のデータにアクセスする 2 番目の方法:

// 1. 必要に応じて mapState 関数をインポートします from vuex import { mapState } from 'vuex'

// 2. 先ほどインポートした mapState 関数を使用して、現在のコンポーネントに必要なグローバル データを現在のコンポーネントの計算プロパティにマップします。
    ...mapSate(['count'])
}

2. 突然変異

ミューテーションはストア内のデータを変更するために使用されます。

ストアのデータはミューテーションを通じてのみ変更可能であり、ストア内のデータを直接操作することはできません。ミューテーションをコミットすることで変更します。その本質は実際には関数です。

この方法は操作が少し複雑ですが、すべてのデータの変更を集中的に監視できます。

変異操作は同期的である必要がある

ミューテーションを送信するたびに、レコードが作成されます。Vuex は、各データ変更の履歴とトラックをより便利に記録するためにこれを実行し、監視やロールバック操作に便利です。

突然変異を引き起こす最初の方法:

// store.js でミューテーションを定義する
定数ストア = 新しい Vuex.Store({
    州： {
        カウント: 0
    },
    突然変異:
        追加(状態) {
            state.count++ //状態の変更}
    }
})

// コンポーネント内でのミューテーションをトリガーする
メソッド: {
    ハンドル（） {
        // ミューテーションをトリガーする最初のメソッド this.$store.commit('add')
    }
}

ミューテーションをトリガーするときにパラメータを渡します:

//ストア.js
突然変異:
    addN(state, step) { //最初のパラメータはstateで、次のパラメータはstore.commitによって渡される追加のパラメータ、つまりミューテーションのペイロードです。
        状態.カウント += ステップ
    }
}

// コンポーネント内 this.$store.commit('addN', 3) // コミット関数を呼び出し、ミューテーションをトリガーするときにパラメータを渡します

突然変異を誘発する2番目の方法:

// 1. 必要に応じて mapMutations 関数をインポートします from vuex import { mapMutations } from 'vuex'

// 2. 新しくインポートした mapMutations 関数を使用して、指定された変異関数を現在のコンポーネント メソッドの methods 関数にマップします。{
    ...mapMutations(['add', 'addN'])
}

注意: 遅延の追加などの非同期操作をミューテーション関数で実行しないでください。

3. アクション

アクションは非同期タスクを処理するために使用されます。

非同期操作を通じてデータを変更する場合は、Mutation ではなく Action を使用する必要があります。ただし、Mutation をトリガーして Action 内のデータを間接的に変更する必要はあります。

アクションをトリガーする最初の方法:

//store.js でアクションを定義する
定数ストア = 新しい Vuex.store({
    //...他のコードアクションを省略: {
        addAsync(コンテキスト、ペイロード) {
            タイムアウトを設定する(() => {
                コンテキスト.commit('追加')
            }, 1000)
        }
    }
})

// コンポーネント内のトリガーアクション
メソッド: {
    ハンドル（） {
        this.$store.dispatch('addAsync', 3)
    }
}

注意: 遅延の追加などの非同期操作をミューテーション関数で実行しないでください。

ミューテーションで定義された関数のみが状態のデータを変更する権限を持ちます。状態内のデータはアクションで直接変更することはできず、ミューテーションは context.commit を通じてトリガーされる必要があります。

context: context オブジェクトは、矢印関数の this と同等であり、ストアインスタンスと同じプロパティとメソッドを持ちます。

ペイロード: マウントされたパラメータ

アクションをトリガーする 2 番目の方法:

// 1. 必要に応じて mapActions 関数をインポートします from vuex import { mapActions } from 'vuex'

// 2. 新しくインポートした mapActions 関数を使用して、指定されたアクション関数を現在のコンポーネント メソッドのメソッド関数にマップします。{
    ...mapActions(['addAsync', 'addN'])
}

4. ゲッター

Getter は、ストア内のデータを処理して新しいデータを作成するために使用されます。 Getter はストア内の元のデータを変更せず、ラッパーとしてのみ機能します。

Getter は、Vue の計算プロパティと同様に、Store 内の既存のデータを処理して新しいデータを形成できます。

計算プロパティと同様に、ゲッターの戻り値は依存関係に基づいてキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。つまり、Store のデータが変更されると、Getter のデータも変更されます。

// ゲッターを定義する 
定数ストア = 新しい Vuex.store({
    州： {
        カウント: 0
    },
    getters: { // 状態値の変化をリアルタイムで監視する showNum: state => {
            '現在の最新の番号は [' + state.count + '] です' を返します
        }
    }
})

ゲッターを使用する最初の方法: this.$store.getters.name

ゲッターを使用する2番目の方法:

'vuex' から { mapGetters } をインポートします。

計算: {
    ...mapGetters(['showNum'])
}

上記は、Vuex の役割を深く理解するための詳細な内容です。Vuex の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。