vue2 pinia

### 使用 Pinia 进行 Vue 2 项目的状态管理

尽管 Pinia 主要设计用于 Vue 3，但在某些情况下也可以通过一些额外的工作将其集成到 Vue 2 中。需要注意的是官方并不推荐这样做，因为这可能会带来兼容性和维护上的挑战。

#### 安装依赖包
为了能够在 Vue 2 应用程序里使用 Pinia，首先需要安装 `pinia` 和其对应的 Vue 2 插件：

npm install pinia @pinia/vue-composition-api

#### 初始化并注册插件
接着，在入口文件（通常是 main.js 或者类似的启动脚本）中初始化 Pinia 并创建 store 实例:

import { createApp } from 'vue';
import App from './App.vue';
// 导入必要的模块来支持 Composition API 特性
import { createStore } from '@pinia/vue-composition-api';

const app = createApp(App);

app.use(createStore());

app.mount('#app');

请注意上述代码片段中的 `createStore()` 函数调用[^1]。

#### 创建 Store 模块
定义好所需的 stores 后可以像下面这样组织它们：

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

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

此部分展示了如何利用 TypeScript 来增强类型安全性的同时构建一个简单的计数器逻辑[^2]。

#### 组件内使用 Store
最后一步是在组件内部访问这些数据源。这里给出一段示例代码展示怎样在一个单文件组件(SFC)里面操作之前建立好的 counter store :

<template>
  <div class="example">
    {{ counter }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { computed, onMounted } from 'vue';
import { useCounterStore } from '../stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();

    return {
      counter: computed(() => counterStore.count),
      increment: () => counterStore.increment(),
    };
  }
};
</script>

这段代码说明了如何借助于计算属性和方法绑定实现界面与存储之间的交互[^3]。