uniapp vue3使用 vuex

uniApp是一个基于Vue.js的跨平台框架，用于快速构建原生移动应用。在Vue3版本中，Vuex（Vue的状态管理工具）仍然可以作为核心组件来管理和共享应用程序的状态。以下是uniApp中如何使用Vuex的基本步骤：

1. 安装Vuex：首先需要安装`vue3-element-ui-vuex`或者`vuex`库，如果你使用的是基于Element Plus的架构，推荐后者。

npm install vuex --save

2. 初始化Store：在项目中创建一个名为store的文件夹，并在其中创建一个index.js文件，配置初始状态（state）、 mutations、actions 和 getters。

import { createStore } from 'vuex'

const state = {
  count: 0,
}

const mutations = {
  increment(state) {
    state.count++
  },
}

const actions = {
  increment(context) {
    context.commit('increment')
  },
}

const getters = {
  getCount(state) {
    return state.count
  },
}

export default createStore({
  state,
  mutations,
  actions,
  getters,
})

3. 使用Store：在每个需要访问或修改状态的组件中，通过`mapState`、`mapGetters`、`mapActions`和`mapMutations`来自动导入和使用状态和方法。

<template>
  <div>{{ count }}</div>
  <button @click="increment">点击加一</button>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState(['count']), // 获取状态
  },
  methods: {
    ...mapActions(['increment']), // 调用动作
    increment() {
      this.increment()
    },
  },
}
</script>