pinia 的使用（二）—— state

---

1、Pinia 基础应用

① 项目搭建

1. 使用vite初始化项目：npm create vite@latest
2. 创建项目名：vue3-ts-pinia
3. 选择项目框架：vue
4. 选择项目语言：vue-ts
5. 进入到创建的项目目录下，安装依赖：npm install
6. 启动项目：npm run dev

② 安装

1. 使用yarn安装：yarn add pinia
2. 使用npm安装：npm install pinia
3. 目前安装的pinia版本是2.0.12；

提示：

1. 如果您的应用程序使用 Vue 2，您还需要安装组合式 api 包: @vue/composition-api。
2. 如果你使用的是 Vue CLI，你可以试试这个非官方插件。

③ 初始化配置

1. 在项目的src/main.ts文件中进行配置：

   import { createApp } from 'vue'
   import App from './App.vue'
   import { createPinia } from 'pinia' // 导入 pinia
   
   // 创建 pinia 实例对象
   const pinia = createPinia()
   
   createApp(App)
     .use(pinia) // 挂载 pinia 到 vue 实例对象上
     .mount('#app')
   
   

2. 在src目录下创建一个store文件夹，再在这个文件夹中创建一个index.ts文件，用来编写pinia代码；

2、定义和使用 Store

① 定义Store

1. 在src/store/index.ts文件中