データ管理と状態共有に Vuex を使用するにはどうすればよいですか?

WBOY
リリース: 2023-06-25 13:44:36
オリジナル
1570 人が閲覧しました

Vuex は、Vue.js 用に特別に設計された状態管理ライブラリであり、コンポーネント間のデータ転送と管理を簡素化し、アプリケーションの保守性と拡張性を向上させるのに役立ちます。この記事では、誰もが Vuex をよりよく理解して適用できるように、データ管理と状態共有に Vuex を使用する方法を紹介します。

1.Vuex とは何ですか?

Vuex は、Vue.js によって公式に提供される状態管理ライブラリであり、集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態の一貫性を確保します。 Vuex では、ストアを通じてデータと状態を管理できます。ストアには次の中心的な概念が含まれています:

  • state: アプリケーションにさまざまな状態値を保存するために使用される状態データ ;
  • getter: 計算された属性を読み取り、ストアから一部の状態値を取得するために使用されます;
  • mutation: 状態を同期的に変更し、状態内のデータを同期的に変更するために使用されます;
  • action : 非同期変更ステータス、非同期操作の処理と変更の送信に使用されます;
  • module: モジュール化、大規模なストアを小さなサブモジュールに分割し、ステータスと操作を個別に管理するために使用されます。

2.なぜ Vuex が必要なのでしょうか?

Vue.js アプリケーションでは、コンポーネント レベルが増加し続けるにつれて、コンポーネント間のデータと状態の転送がますます複雑になります。現時点では、状態の管理と共有を支援する状態管理ライブラリが必要です。アプリケーション全体にわたるさまざまな状態値。 Vuex を使用すると、次の利点が得られます:

  1. 状態の一元管理: 各コンポーネントが同じ状態ツリーにアクセスできるため、状態管理がより統合され一元化されます;
  2. メンテナンスとデバッグが容易になります: Vuex は、アプリケーションのステータスとデータ フローをより深く理解するのに役立ち、デバッグとメンテナンスがより便利になります;
  3. コードの可読性と保守性の向上: Vuex を使用すると、データの制御フローを集中させることができます。 1 つの場所で、コード ロジックがより明確になり、保守が容易になります。
  4. ビジネス ロジックと状態管理の分離: 状態を Vuex ストアに保存することで、ビジネス ロジック コンポーネントと状態管理コンポーネントを実装できます。分離により保守と管理が容易になります。 。

3. Vuex の使用方法は?

Vuex を使用する前に、Vuex ライブラリをインストールし、Vue プロジェクトに導入する必要があります。

npm install vuex --save

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)
ログイン後にコピー

次に、Vuex ストアを作成し、Vue インスタンスに登録する必要があります。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    evenOrOdd(state) {
      return state.count % 2 === 0 ? 'even' : 'odd'
    }
  }
})

new Vue({
  el: '#app',
  store,
  computed: {
    count() {
      return this.$store.state.count
    },
    evenOrOdd() {
      return this.$store.getters.evenOrOdd
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
})
ログイン後にコピー

上記のコードでは、3 つの中心的な概念 (状態、突然変異、アクション) を含む Vuex ストアを作成しました。その中で、状態は状態データを保存するために使用され、ミューテーションは状態を同期的に変更するために使用され、アクションは非同期操作を処理してミューテーションを送信するために使用されます。ここでは、state のカウント値が偶数か奇数かを計算するゲッターも定義します。

Vue インスタンスでは、計算属性とメソッド属性を使用して、ストア内の状態、突然変異、およびアクションへのアクセスを実現します。 computed 属性の count と EvenOrOdd は状態の実際のデータに基づいて計算され、methods 属性の increment、decrement、およびcrementAsync は状態を変更するために使用されるメソッドです。

4. 状態と突然変異の使用

State は Vuex の中心的な概念であり、アプリケーションにさまざまな状態値を保存するために使用されます。一般に、これは次の方法で変更する必要があります。突然変異。 Vuex では、次の方法で状態にアクセスして変更できます:

  1. 状態へのアクセス: 上記のサンプル コードのように、this.$store.state を通じてストア内の状態にアクセスできます。状態です。
  2. 状態を直接変更する:
    状態を直接変更すると、Vuex 静的分析ツールでエラーが報告されます。これは、Vuex の原則として、ストア内のデータ変更には突然変異が必要であるためです。状態値を直接変更する必要がある場合は、変更によって UI 更新が応答的にトリガーされるように、Vue.set を使用する必要があります。サンプル コードは次のとおりです。 mutation:
  3. ミューテーションは、Vuex の同期操作である変更に使用される状態のコレクションです。ミューテーションを実行することで、状態内の値を任意に変更することができます。ミューテーションは、Vuex で状態を変更する唯一の方法です。ミューテーションでは、非同期操作やその他の副作用を実行できません。次の方法でミューテーションを送信できます:
    Vue.set(state.obj, 'newProp', 123)
    ログイン後にコピー
  1. 4. アクションとゲッターの使用
  2. アプリケーションでは、非同期操作を実行する必要がある場合があります。 , アクションを使用してそれを処理できます。アクションには非同期操作を含めることができます。最後に、状態内のデータを変更するためにミューテーションを送信する必要があります。 Vuex では、次の方法でアクションを操作できます:

アクションの定義:

this.$store.commit('increment')   // 传入 mutation 的名称
this.$store.commit({
  type: 'increment',
  amount: 10    // 传入额外的参数
})
ログイン後にコピー
  1. アクションの送信:
actions: {
  incrementAsync(context) {
    setTimeout(() => {
      context.commit('increment')
    }, 1000)
  }
}
ログイン後にコピー
    Vuex では、ゲッターはストア内の計算されたプロパティと見なすことができ、ストアの状態から派生したいくつかの状態値であり、多数の反復された論理的に複雑な計算をキャッシュできます。 Vuex では、次の方法でゲッターを使用できます:
ゲッターの定義:

this.$store.dispatch('incrementAsync')
ログイン後にコピー
  1. アクセス ゲッター:
getters: {
  evenOrOdd(state) {
    return state.count % 2 === 0 ? 'even' : 'odd'
  }
}
ログイン後にコピー
    5. モジュール
  1. の使用

    在 Vuex 中,如果我们的应用程序中存在大量的 state 和 mutations、actions 和 getters,单独存放到一个 store 中会极大地增加代码的复杂性和维护难度,此时我们可以使用 module 在 Vuex 中进行模块化管理。在 using module 模式中,每个模块都拥有自己的 state、mutations、actions 和 getters,从而让代码更加清晰明了、易于维护。使用 module 的方法和常规的 Vuex store 相似,只是需要在 Vuex.Store() 中添加模块,如下所示:

    const moduleA = {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
    
    const store = new Vuex.Store({
      modules: {
        a: moduleA
      }
    })
    ログイン後にコピー

    如上代码所示,我们创建了一个名为 moduleA 的模块,然后在 store 中通过 modules 选项将其添加到了 Vuex 的 store 中。在组件中访问模块的 state、mutations、actions 和 getters,和访问常规的 Vuex store 中的一样,只需要在前面加上模块名即可,例如:

    computed: {
      ...mapState('a', {
        count: state => state.count
      }),
      ...mapGetters('a', [
        'evenOrOdd'
      ])
    },
    methods: {
      ...mapMutations('a', [
        'increment'
      ]),
      ...mapActions('a', [
        'incrementAsync'
      ])
    }
    ログイン後にコピー

    在组件中,使用 mapState、mapMutation、mapActions 和 mapGetters 进行访问和操作,可以更加方便和快捷地操作和维护模块的状态和数据。

    六、总结

    本文简要介绍了 Vue.js 的状态管理库 Vuex 的使用方法和常用场景,包括 state、mutation、action、getter 和 module 等几个核心概念的使用。Vuex 可以帮助我们有效地管理和共享应用程序中的各种状态值,提高代码的可维护性和可扩展性。在使用 Vuex 的过程中,我们还需要注意一些细节和坑点,如同步和异步操作、state 和 mutation 的使用规范等问题,需要认真掌握和注意。

    以上がデータ管理と状態共有に Vuex を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート