uniapp怎麼使用vuex

如何在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
<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>

模組化 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
    }
  }
}

提示

• 在應用程式啟動時建立 Vuex 儲存。
• 從元件使用 this.$store 存取 Vuex 儲存。
• 透過使用映射助手（例如 mapActions 和 mapState）將 Vuex 操作和狀態綁定到元件中。
• 可以依照需要將 Vuex 儲存分割為多個模組。

以上是uniapp怎麼使用vuex的詳細內容。更多資訊請關注PHP中文網其他相關文章！