Alice-Ti

Appearance

全局状态管理 ​

Pinia ​

下载 ​

bash
# 需要 cd 到的项目目录下
npm install pinia

查看的 package.json ，看看里面的 dependencies 是否成功加入了 Pinia 和它的版本号（下方是示例代码，以实际安装的最新版本号为准）

json
{
  "dependencies": {
    "pinia": "^2.0.11"
  }
}

打开 src/main.ts 文件，引入 Pinia

javascript
import { createApp } from 'vue'
import { createPinia } from 'pinia' // 导入 Pinia
import App from '@/App.vue'

createApp(App)
  .use(createPinia()) // 启用 Pinia
  .mount('#app')

TIP

也可以通过 Create Preset 创建新项目（选择 vue 技术栈进入，选择 vue3-ts-vite 模板），可以得到一个集成常用配置的项目启动模板，该模板现在使用 Pinia 作为全局状态管理工具。

使用 ​

创建 Store ​

Pinia 的核心称之为 Store 。

参照 Pinia 官网推荐的项目管理方案，也是先在 src 文件夹下创建一个 stores 文件夹，并在里面添加一个 index.ts 文件，然后就可以来添加一个最基础的 Store 。

Store 是通过 defineStore 方法来创建的，它有两种入参形式：

形式 1 ：接收两个参数 ​

接收两个参数，第一个参数是 Store 的唯一 ID ，第二个参数是 Store 的选项：

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

export const useStore = defineStore('main', {
  // Store 选项...
})

形式 2 ：接收一个参数 ​

接收一个参数，直接传入 Store 的选项，但是需要把唯一 ID 作为选项的一部分一起传入：

ts

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

export const useStore = defineStore({
  id: 'main',
  // Store 选项...
})

TIP：不论是哪种创建形式，都必须为 Store 指定一个唯一 ID 。

另外可以看到这里把导出的函数名命名为 useStore ，以 use 开头是 Vue 3 对可组合函数的一个命名约定。

并且使用的是 export const 而不是 export default （详见：命名导出和默认导出），这样在使用的时候可以和其他的 Vue 组合函数保持一致，都是通过 import { xxx } from 'xxx' 来导入。

如果有多个 Store ，可以分模块管理，并根据实际的功能用途进行命名（ e.g. useMessageStore 、 useUserStore 、 useGameStore … ）

Pinia官网

全局状态管理

Pinia使用方法及持久化存储