Uniapp中使用Vue3开发微信小程序的全局状态管理实践

前言

在开发微信小程序时，状态管理是一个非常重要的环节。随着项目规模的增大，组件之间的状态共享和通信变得复杂，传统的props和event方式已经无法满足需求。Uniapp作为一个跨平台开发框架，支持Vue3语法，并且提供了多种状态管理方案。本文将介绍如何在Uniapp中使用Vue3的Composition API结合Pinia进行全局状态管理，以提升开发效率和代码可维护性。

一、为什么选择Pinia？

Pinia是Vue3官方推荐的状态管理库，相比于Vuex，Pinia具有以下优势：

更轻量：Pinia的API设计更加简洁，学习成本低。
更好的TypeScript支持：Pinia天生支持TypeScript，类型推断更加友好。
模块化：Pinia支持模块化状态管理，便于代码组织和维护。
Composition API：Pinia与Vue3的Composition API完美结合，使用起来更加灵活。

二、在Uniapp中集成Pinia

1. 安装Pinia

首先，我们需要在项目中安装Pinia。打开终端，执行以下命令：

npm install pinia

2. 创建Pinia Store

在src目录下创建一个store文件夹，并在其中创建一个counterStore.js文件，用于管理计数器的状态。

// src/store/counterStore.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

3. 在main.js中引入Pinia

在src/main.js中引入Pinia，并将其挂载到Vue实例上。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

4. 在组件中使用Pinia Store

现在，我们可以在任何组件中使用useCounterStore来访问和修改全局状态。

<!-- src/pages/index/index.vue -->
<template>
  <view class="container">
    <text>当前计数：{{ count }}</text>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </view>
</template>

<script setup>
import { useCounterStore } from '@/store/counterStore';

const counterStore = useCounterStore();
const { count } = counterStore;
const { increment, decrement } = counterStore;
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

三、Pinia的高级用法

1. 使用Getters

Pinia支持定义getters，用于从state中派生出一些计算属性。

// src/store/counterStore.js
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

在组件中使用getters：

<template>
  <view>
    <text>双倍计数：{{ doubleCount }}</text>
  </view>
</template>

<script setup>
import { useCounterStore } from '@/store/counterStore';

const counterStore = useCounterStore();
const { doubleCount } = counterStore;
</script>

2. 模块化Store

随着项目规模的增大，我们可以将不同的业务逻辑拆分到不同的Store中，便于维护。

// src/store/userStore.js
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
  }),
  actions: {
    setUserInfo(info) {
      this.userInfo = info;
    },
  },
});

在组件中使用多个Store：

<script setup>
import { useCounterStore } from '@/store/counterStore';
import { useUserStore } from '@/store/userStore';

const counterStore = useCounterStore();
const userStore = useUserStore();

const { count } = counterStore;
const { userInfo } = userStore;
</script>