uniappでvuexを使用する方法-uni-app-php.cn

UniApp で Vuex を使用する方法

はじめに
Vuex は、Vue.js アプリケーションでアプリケーションを一元管理できる状態管理ツールです。状態とロジック。クロスプラットフォーム開発フレームワークとして、UniApp は Vuex の使用もサポートしています。

Vuex のインストール
まず、次のコマンドを使用して Vuex の依存関係をインストールします:

npm install vuex --save

ログイン後にコピー

または

yarn add vuex

ログイン後にコピー

Vuex ストレージの作成
次に、アプリケーションの状態とロジックを含む Vuex ストアを作成します。

// store/index.js import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount (state) { return state.count } } }) export default store

ログイン後にコピー

コンポーネントでの Vuex の使用
コンポーネントから Vuex ストアにアクセスするには、this.$storeを使用できます。

// App.vue

ログイン後にコピー

モジュラー Vuex ストア
大規模なアプリケーションの場合、Vuex ストアを複数のモジュールに分割すると便利です。各モジュールは独自の状態とロジックを管理できます。

// store/index.js import Vuex from 'vuex' import Vue from 'vue' import counter from './modules/counter' Vue.use(Vuex) const store = new Vuex.Store({ modules: { counter } }) export default store

ログイン後にコピー

// store/modules/counter.js export default { state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount (state) { return state.count } } }

ログイン後にコピー

ヒント