uniapp pinia使用

### 如何在 UniApp 中集成和使用 Pinia 进行状态管理

#### 创建应用实例并初始化 Pinia

为了使 Pinia 能够用于整个应用程序，在 `main.js` 文件中创建应用实例时需引入并注册 Pinia。具体操作如下：

// main.js
import { createSSRApp } from "vue";
import * as Pinia from "pinia";
import { createUnistorage } from "pinia-plugin-unistorage";

export function createApp() {
    const app = createSSRApp(App);
    const store = Pinia.createPinia();
    
    // 启用插件实现数据持久化存储功能
    store.use(createUnistorage());
    
    app.use(store);

    return {
        app,
        Pinia, // 将 Pinia 返回以便后续可能的需求
    };
}

上述代码展示了如何通过调用 `createPinia()` 方法来创建一个新的 Pinia 实例，并将其挂载到 Vue 应用程序上[^2]。

#### 定义 Store 模块

定义好全局的状态仓库之后，还需要编写具体的模块文件以保存特定业务逻辑所需的数据以及相应的修改方法。下面是一个简单的例子展示怎样建立一个名为 counter 的 store 来追踪计数器数值的变化情况：

// stores/counter.ts
import { defineStore } from 'pinia';

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

这段脚本利用了 `defineStore` 函数来自动生成带有初始状态（state）及行为动作（actions）的对象结构体[^1]。

#### 访问与更新 State 数据

一旦完成了前面两步工作，则可以在组件内部轻松获取或改变已声明过的属性值。比如在一个页面级组件里读取当前计数值并向其加一的操作可以这样写：

<template>
  <div class="example">
    Count is {{ counter.count }}
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();

function incrementCount(){
  counter.increment()
}
</script>

此部分说明了如何借助组合式 API 形式的钩子函数 `useCounterStore` 获取之前定义好的 store 对象及其成员变量和方法[^3]。