uniappでvuexを使用する方法

UniApp で Vuex を使用する方法

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

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

<code class="bash">npm install vuex --save</code>

または

<code class="bash">yarn add vuex</code>

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

<code class="javascript">// 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</code>

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

<code class="javascript">// App.vue
<template>
  <div>{{ this.$store.state.count }}</div>
  <button @click="increment">Increment</button>
  <button @click="incrementAsync">Increment Async</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'increment',
      'incrementAsync'
    ])
  }
}
</script></code>

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

<code class="javascript">// 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</code>

<code class="javascript">// 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
    }
  }
}</code>

ヒント

• アプリケーションの起動時に Vuex ストレージを作成します。
• this.$store を使用して、コンポーネント内から Vuex ストアにアクセスします。
• mapActions や mapState などのマッピング ヘルパーを使用して、Vuex アクションと状態をコンポーネントにバインドします。
• Vuex ストレージは、必要に応じて複数のモジュールに分割できます。

以上がuniappでvuexを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。