So verwenden Sie Vuex in Uniapp

Wie verwende ich Vuex in UniApp? Installieren Sie Vuex-Abhängigkeiten. Erstellen Sie Vuex-Speicher, um den Anwendungsstatus und die Logik zu verwalten. Greifen Sie über diesen.$store innerhalb der Komponente auf den Vuex-Store zu. Binden Sie Vuex-Aktionen und -Zustände mithilfe von Mapping-Helfern in Komponenten ein. Für große Anwendungen kann der Vuex-Speicher in mehrere Module aufgeteilt werden.

So verwenden Sie Vuex in UniApp

Einführung
Vuex ist ein Statusverwaltungstool, mit dem Sie den Status und die Logik Ihrer Anwendung zentral in einer Vue.js-Anwendung verwalten können. Als plattformübergreifendes Entwicklungsframework unterstützt UniApp auch den Einsatz von Vuex.

Vuex installieren
Zuerst installieren Sie die Vuex-Abhängigkeiten mit dem folgenden Befehl:

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

oder

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

Erstellen Sie einen Vuex-Store
Als nächstes erstellen Sie einen Vuex-Store, der den Status und die Logik der Anwendung enthält.

<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 in einer Komponente verwenden
Um von einer Komponente aus auf den Vuex-Speicher zuzugreifen, können Sie this.$store verwenden. 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
• Modularer Vuex-Speicher

Bei großen Anwendungen ist es sinnvoll, den Vuex-Speicher in mehrere Module aufzuteilen. Jedes Modul kann seinen eigenen Status und seine eigene Logik verwalten. 🎜rrreeerrree🎜🎜Tipp🎜🎜

🎜Erstellen Sie Vuex-Speicher beim Anwendungsstart. 🎜🎜Verwenden Sie this.$store, um von einer Komponente aus auf den Vuex-Speicher zuzugreifen. 🎜🎜Binden Sie Vuex-Aktionen und -Zustände in Komponenten, indem Sie Mapping-Helfer wie mapActions und mapState verwenden. 🎜🎜Vuex-Speicher kann je nach Bedarf in mehrere Module aufgeteilt werden. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vuex in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!