Comment utiliser vuex dans uniapp

Comment utiliser Vuex dans UniApp ? Installez les dépendances Vuex. Créez un stockage Vuex pour gérer l'état et la logique des applications. Accédez au magasin Vuex depuis le composant via this.$store. Liez les actions et l'état de Vuex dans des composants à l'aide d'assistants de mappage. Pour les applications volumineuses, le stockage Vuex peut être divisé en plusieurs modules.

Comment utiliser Vuex dans UniApp

Introduction
Vuex est un outil de gestion d'état qui vous permet de gérer de manière centralisée l'état et la logique de votre application dans une application Vue.js. En tant que framework de développement multiplateforme, UniApp prend également en charge l'utilisation de Vuex.

Installez Vuex
Tout d'abord, installez les dépendances Vuex à l'aide de la commande suivante :

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

ou

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

Créez un magasin Vuex
Ensuite, créez un magasin Vuex qui contiendra l'état et la logique de l'application.

<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>

Utiliser Vuex dans un composant
Pour accéder au stockage Vuex à partir d'un composant, vous pouvez utiliser this.$store. 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 和 mapStaterrreee
• Stockage modulaire Vuex

Pour les applications volumineuses, il est utile de diviser le stockage Vuex en plusieurs modules. Chaque module peut gérer son propre état et sa propre logique. 🎜rrreeerrree🎜🎜Astuce🎜🎜

🎜Créez un stockage Vuex au démarrage de l'application. 🎜🎜Utilisez this.$store pour accéder au stockage Vuex à partir d'un composant. 🎜🎜Liez les actions et les états Vuex en composants à l'aide d'assistants de mappage tels que mapActions et mapState. 🎜🎜Le stockage Vuex peut être divisé en plusieurs modules selon les besoins. 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!