Cara menggunakan vuex dalam uniapp

Bagaimana untuk menggunakan Vuex dalam UniApp? Pasang kebergantungan Vuex. Cipta storan Vuex untuk mengurus keadaan aplikasi dan logik. Akses gedung Vuex dari dalam komponen melalui ini.$store. Gunakan pembantu pemetaan untuk mengikat tindakan Vuex dan menyatakan ke dalam komponen. Untuk aplikasi yang besar, storan Vuex boleh dibahagikan kepada beberapa modul.

Cara menggunakan Vuex dalam UniApp

Pengenalan
Vuex ialah alat pengurusan negeri yang membolehkan anda mengurus keadaan dan logik aplikasi anda secara berpusat dalam aplikasi Vue.js. Sebagai rangka kerja pembangunan merentas platform, UniApp turut menyokong penggunaan Vuex.

Pasang Vuex
Mula-mula, pasang kebergantungan Vuex menggunakan arahan berikut:

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

atau

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

Buat kedai Vuex
Seterusnya, akan mencipta keadaan dan log yang mengandungi 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>

Menggunakan Vuex dalam komponen
Untuk mengakses storan Vuex daripada komponen, anda boleh menggunakan ini.$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
• Storan Vuex Modular

Untuk aplikasi besar, adalah berguna untuk memisahkan storan Vuex kepada berbilang modul. Setiap modul boleh menguruskan keadaan dan logiknya sendiri. 🎜rrreeerrree🎜🎜Tip🎜🎜

🎜Buat storan Vuex semasa aplikasi dimulakan. 🎜🎜Gunakan ini.$store untuk mengakses storan Vuex daripada komponen. 🎜🎜Ikat tindakan dan keadaan Vuex ke dalam komponen dengan menggunakan pembantu pemetaan seperti mapActions dan mapState. 🎜🎜Storan Vuex boleh dibahagikan kepada beberapa modul mengikut keperluan. 🎜🎜

Atas ialah kandungan terperinci Cara menggunakan vuex dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!