在uni-app中,可以使用vuex进行状态管理。下面是一个简单的uni-app中使用vuex的代码示例:
npm install vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
}
},
actions: {
increment({ commit }) {
commit('increment')
},
decrement({ commit }) {
commit('decrement')
}
}
})
export default store
import Vue from 'vue'
import App from './App'
import store from './store/index'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
<template>
<div>
<div>{{ count }}</div>
<div>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count
}
},
methods: {
increment() {
this.$store.dispatch('increment')
},
decrement() {
this.$store.dispatch('decrement')
}
}
}
</script>
以上就是一个简单的uni-app中使用vuex进行状态管理的示例代码。在这个示例中,通过vuex的state来存储状态数据,通过mutations中的方法来更新状态,通过actions中的方法来触发mutations中的方法。在组件中通过computed和methods来获取和操作状态数据。