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

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

WBOY

リリース： 2023-06-25 13:44:36

オリジナル

1588 人が閲覧しました

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

1.Vuex とは何ですか?

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

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

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

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

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

状態へのアクセス: 上記のサンプルコードのように、this.$store.state を通じてストア内の状態にアクセスできます。状態です。
状態を直接変更する:
状態を直接変更すると、Vuex 静的分析ツールでエラーが報告されます。これは、Vuex の原則として、ストア内のデータ変更には突然変異が必要であるためです。状態値を直接変更する必要がある場合は、変更によって UI 更新が応答的にトリガーされるように、Vue.set を使用する必要があります。サンプルコードは次のとおりです。 mutation:

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

ログイン後にコピー

4. アクションとゲッターの使用

アクションの定義:

this.$store.commit('increment')   // 传入 mutation 的名称
this.$store.commit({
  type: 'increment',
  amount: 10    // 传入额外的参数
})

ログイン後にコピー

アクションの送信:

actions: {
  incrementAsync(context) {
    setTimeout(() => {
      context.commit('increment')
    }, 1000)
  }
}

ログイン後にコピー

ゲッターの定義:

this.$store.dispatch('incrementAsync')

ログイン後にコピー

アクセスゲッター:

getters: {
  evenOrOdd(state) {
    return state.count % 2 === 0 ? 'even' : 'odd'
  }
}

ログイン後にコピー

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