Vue3 Vite3 状态管理 pinia基本使用、 持久化、在路由守卫中使用状态

在《基于 vite 创建 vue3 项目》）一文中整合了 pinia，有不少伙伴不知道 pinia 是什么，本文简单介绍 pinia。主要包括三方面内容：

1. pinia 的基本用法，在《基于 vite 创建 vue3 项目》中 demo 的基础上简单重构。
2. 如何持久化 pinia 中的数据，保证浏览器刷新时，pinia 中的数据不丢失；
3. 在 vue-router 路由守卫中如何使用 pinia。

文中的 demo 仍然基于 vite

1 pinia 的使用

1.1 pinia 是什么

在 vue 2.x 中，vuex 是官方的状态管理库，并且 vue 3 中也有对应的 vuex 版本。但 vue 作者尤大神看了 pinia 后，强势推荐使用 pinia 作为状态管理库。下图是 vue 官网 “生态系统”，pinia 是 vue 生态之一。

1.2 pinia 的特点

1. 支持 vue2 和 vue3，两者都可以使用 pinia；
2. 语法简洁，支持 vue3 中 setup 的写法，不必像 vuex 那样定义 state、mutations、actions、getters 等，可以按照 setup Composition API 的方式返回状态和改变状态的方法，实现代码的扁平化；
3. 支持 vuex 中 state、actions、getters 形式的写法，丢弃了 mutations，开发时候不用根据同步异步来决定使用 mutations 或 actions，pinia 中只有 actions；
4. 对 TypeScript 支持非常友好。

1.3 pinia 的使用

在《基于 vite 创建 vue3 项目》中已经整合了 pinia，现简单回顾并进行一些调整。

1. 安装 pinia 依赖：

yarn add pinia

2. 创建 pinia 实例（根存储 root store）：

之前咱是在 main.ts 中创建的，现将其抽取到独立的文件中：

src/store/index.ts：

import {
    createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

3. 在 main.ts 中以插件的方式传递给 App 实例。

...
import pinia from '@/store'
...
app.use(pinia)
...

4. 在 store/ 目录下创建 modules 目录，存储每个模块的状态，将之前的 demo.ts 移动到 store/modules/ 中。这里使用最新的 Composition API setup 的方式来定义状态。

src/store/modules/demo.ts：

import {
    defineStore } from 'pinia'
import {
    ref } from 'vue'

const useDemoStore = defineStore('demo', () => {
   
  const counter = ref(0)

  const increment = () => {
   
    counter.value++
  }

  return {
   
    counter,
    increment
  }
})

export default useDemoStore

5. 在组件 about.vue 中使用 demo 中的状态 counter 和改变状态的函数 increment。代码和之前一样。

先引入 demo.ts 中定义的 useDemoStore 函数，通过该函数创建 demoStore 实例。然后就可以调用 demoStore 的状态 counter 和 increment 函数了。这里需要注意，无论是 pinia 还是 vuex，通过解构的方式获取状态，会导致状态失去响应性。如：

const {
    counter } = demoStore

此时的 counter 会丢失响应性，当其值改变时，其他组件不会监听到。所以 pinia 提供了 storeToRefs 函数，使其解构出来的状态仍然具备响应性。

const {
    counter } = storeToRefs(demoStore)

src/views/about.vue 完整代码如下：

<template>
  <div class="about">
    <h1>This is an about page</h1