uniapp使用模板vuex

UniApp 使用 Vuex 的过程可以简化单页应用的状态管理。Vuex 是一个专为 Vue.js 应用设计的状态管理模式，它将应用程序的状态集中存储在一个响应式的数据结构中，使得状态的变化能够通过组件之间的通信轻松地同步。

在 UniApp 中引入 Vuex 的步骤通常如下：

1. **安装Vuex**：首先需要在项目中安装 vuex，可以在终端或命令行工具中运行 `npm install vuex` 或者 `yarn add vuex`。

2. **创建store**：在项目根目录下创建一个名为 `store` 的文件夹，并在其中创建一个名为 `index.js` 的文件作为 store 的入口文件。在这里配置初始状态、actions、mutations 和 getters 等。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 初始化状态
  },
  mutations: {
    // 更新状态的方法
  },
  actions: {
    // 异步操作
  },
  getters: {
    // 计算属性
  }
})

3. **分隔模块化**：对于大型项目，可以将状态划分到多个模块中，每个模块有自己的 `state`, `mutations`, `actions` 和 `getters`。例如，`auth.js` 或 `postList.js`。

4. **在组件中引用Store**：在需要管理状态的 Vue 组件中，通过 `this.$store` 能够访问到 Store 中的所有数据。使用 `commit()` 发起 mutation，使用 `dispatch()` 发起 action。

5. **注入store到组件**：使用 `provide/inject` 或者 `options API` 的 `setup` 函数，在父组件中提供 store，子组件就可以自动注入并使用。

// 父组件
<script setup>
import { provide } from 'vue'
import store from './store'

provide('store', store)
</script>

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { mapGetters } from 'vuex'

const store = inject('store')
const message = computed(() => store.state.message)
onMounted(() => {
  // 从 store 中获取数据
})
</script>