Uniapp に Vuex が組み込まれているかどうかを調べてみましょう

Uniapp は、Vue フレームワークに基づいて開発されたクロスプラットフォーム アプリケーション開発フレームワークです。 Vuex は、Vue の状態管理ライブラリとして、Vue アプリケーションが複数のコンポーネント間で状態を共有および管理するのに役立ちます。では、Uniapp には Vuex が組み込まれているのでしょうか?一緒に調べてみましょう。

Uniapp には Vuex があります

答えは「はい」です。 Uniapp には Vuex が組み込まれており、開発者が Uniapp で Vuex を使用してアプリケーションのステータスを管理できるようにします。これは、Uniapp のより完全な機能の 1 つでもあります。

Vuex が必要な理由

より複雑なアプリケーションでは、同じ状態を共有する必要がある複数のコンポーネントが存在する場合があります。状態共有と状態変更の管理に役立つ管理ツールがない場合、これらの状態変更の処理は非常に面倒になります。

Vuex の登場により、状態をより効率的に管理できるようになります。 Vuex はグローバルな状態ツリーを維持するため、開発者はさまざまなコンポーネント間で状態を共有でき、特定のルールを通じて状態の変更を制御して、状態の一貫性と制御性を確保できます。

Vuex の中心的な概念

Vuex を使用する場合、最初にいくつかの中心的な概念を理解する必要があります:

1. 状態: 状態はグローバル データ ストレージ オブジェクトです。アプリケーションの状態。
2. Getter: Getter は、計算されたプロパティと同様に、状態のデータを取得するために使用されます。
3. ミューテーション: ミューテーションは状態内のデータを変更するために使用され、同期的にのみ実行できます。
4. アクション: アクションは、状態内のデータを非同期的に変更するために使用され、非同期操作を処理するために使用できます。
5. Module: module は Vuex を複数のモジュールに分割するために使用され、各モジュールには独自の状態、ゲッター、ミューテーション、およびアクションがあります。

Uniapp で Vuex を使用する方法

Uniapp を使用してプロジェクトを開発する場合、プロジェクトの作成時に Vuex を使用するかどうかを選択できます。選択がない場合は、手動で設定する必要があります。

まず、srcフォルダー配下にstoreフォルダーを作成し、その配下にindex.jsファイルを作成します。

このファイルでは、最初に Vuex を参照する必要があります:

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

Vue.use(Vuex)

次に、Vuex.Store インスタンスを定義する必要があります:

export default new Vuex.Store({
  state: { // 状态
    userInfo: {}
  },
  mutations: { // 修改状态
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: { // 异步修改状态
    fetchUserInfo({ commit }) {
       // 异步请求数据，根据返回值进行状态修改
       let userInfo = {...}
       commit('setUserInfo', userInfo)    
    }
  },
  getters: { // 获取状态
    userInfo(state) {
      return state.userInfo;
    }
  }
})

最後に、これを main に導入します。 js ストア、およびストアを Vue インスタンスに挿入します:

import store from './store'
import App from './App'

Vue.prototype.$store = store;

const app = new Vue({
    ...App,
    store
})
app.$mount()

このようにして、すべてのコンポーネントで $store を使用して Vuex の状態にアクセスできます。たとえば、特定のコンポーネントで userInfo を取得したい場合は、次のように記述できます:

export default {
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  }
}

同様に、userInfo を変更したい場合は、次のように記述できます:

this.$store.commit('setUserInfo', userInfo)

Ifこれは非同期変更です。次のように記述できます。

this.$store.dispatch('fetchUserInfo')

概要

Uniapp には Vuex が組み込まれており、開発者は状態をより効率的に管理できます。

Vuex を使用する場合は、その中心となる概念である状態、ゲッター、ミューテーション、アクション、モジュールを理解する必要があります。

Uniapp で Vuex を使用するには、まずストア フォルダーにindex.js ファイルを作成し、Vuex.Store インスタンスを定義して、main.js にストアを導入する必要があります。

最後に、コンポーネントでは、$store を通じて Vuex の状態にアクセスし、変更することができます。

以上がUniapp に Vuex が組み込まれているかどうかを調べてみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。