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

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:
ミューテーションは、Vuex の同期操作である変更に使用される状態のコレクションです。ミューテーションを実行することで、状態内の値を任意に変更することができます。ミューテーションは、Vuex で状態を変更する唯一の方法です。ミューテーションでは、非同期操作やその他の副作用を実行できません。次の方法でミューテーションを送信できます:

Vue.set(state.obj, 'newProp', 123)

3. 4. アクションとゲッターの使用
   
アプリケーションでは、非同期操作を実行する必要がある場合があります。 , アクションを使用してそれを処理できます。アクションには非同期操作を含めることができます。最後に、状態内のデータを変更するためにミューテーションを送信する必要があります。 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. モジュール
2. の使用

   在 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 サイトの他の関連記事を参照してください。