uniapp 中vuex初始化数据，更改数据，获取数据，dispatch分发数据

在uniapp中使用vuex，可以通过以下步骤进行初始化数据、更改数据、获取数据和分发数据：

1. 创建一个vuex的实例，可以在store目录下创建一个index.js文件，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

export default store

2. 在main.js中引入vuex的实例并挂载到Vue实例上

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})
app.$mount()

3. 在组件中通过$store.state.xxx来获取state中的数据，通过$store.commit('mutationName')来触发mutation更新state中的数据，通过$store.dispatch('actionName')来分发actions。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    incrementAsync () {
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>