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

参考https://juejin.cn/post/7152774411571953677，自己简洁化了一部分

1.安装pinia依赖

yarn add pinia

创建pini实例

根目录创建store文件夹，然后创建index.js

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

main.js中使用

import pinia from '@/store'

app.use(pinia)

在 store/ 目录下创建 modules 目录，存储每个模块的状态，现在新建一个demo.js

counter就是变量，incremen就是操作变量的函数

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

页面中使用，

在组件 xxx.vue 中使用 demo 中的状态 counter 和改变状态的函数 increment。

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

<script lang="ts" setup>
import useDemoStore from '@/store/modules/demo'
import { storeToRefs } from 'pinia'

const demoStore = useDemoStore()
const { counter } = storeToRefs(demoStore)

const add = () => {
  demoStore.increment()
}

</script>

 2 持久化 pinia 状态

为什么要持久化，比如说我们使用pinia存储了用户信息，然后用户刷新了页面，或者关闭了浏览器，下次再打开，那么用户信息就会丢失，所以我们需要持久化处理，也就是让数据像缓存一样一直存在

安装插件pinia-plugin-persistedstate

yarn add pinia-plugin-persistedstate

store/index.js中引入该插件，在创建 pinia 实例时传入该插件

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

在需要持久化状态的模块中设置 persist

依旧用上面的demo.js做例子，区别在于defineStore函数多传了第三个函数{ persist: true }。此时浏览器刷新或者关闭浏览器再次打开，数据都会一直存在

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

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

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

  return {
    counter,
    increment
  }
}, {
  persist: true
})

export default useDemoStore

persist 支持多种类型的值，最简单的就是传递 true，此时会将状态缓存在 localStorage 中，该 localStorage 的 key 为模块名（defineStore 的第一个参数）,value 为该模块的状态对象，由于该模块只有一个状态 counter，故value为 {"counter":8}。如下图：

如果需要将其存储在 sessionStorage 中，就需要设置 persist 的值为一个对象：

...
const useDemoStore = defineStore('demo', () => {
	...
}, {
  persist: {
    key: 'aaa',
    storage: sessionStorage
  }
})

此时状态就会同步缓存到 sessionStorage 中，并且key 为咱们指定的 key：

persist 对象类型为 PersistedStateOptions，上面演示了 key 和 storage 属性，该对象的其他属性如下：

}
interface PersistedStateOptions {
    /**
     * Storage key to use.
     * @default $store.id
     */
    key?: string;
    /**
     * Where to store persisted state.
     * @default localStorage
     */
    storage?: StorageLike;
    /**
     * Dot-notation paths to partially save state. Saves everything if undefined.
     * @default undefined
     */
    paths?: Array<string>;
    /**
     * Customer serializer to serialize/deserialize state.
     */
    serializer?: Serializer;
    /**
     * Hook called before state is hydrated from storage.
     * @default null
     */
    beforeRestore?: (context: PiniaPluginContext) => void;
    /**
     * Hook called after state is hydrated from storage.
     * @default undefined
     */
    afterRestore?: (context: PiniaPluginContext) => void;
}

3 在路由守卫中使用状态

前面演示了在组件中使用 pinia，在组件外如何使用呢？这里演示在全局路由守卫中获取状态值。咱们创建一个路由守卫，在路由守卫中使用 nprogress 显示页面加载进度条。

安装nprogress

nprogress是一个页面加载中的进度条插件

yarn add nprogress

router/index.js配置

import router from '@/router'
import nProgress from 'nprogress'
import 'nprogress/nprogress.css'
import useDemoStore from '@/store/modules/demo'
import { storeToRefs } from 'pinia'

nProgress.configure({
  showSpinner: false
})

// 全局前置守卫
router.beforeEach((to, from) => {
  nProgress.start()

  const demoStore = useDemoStore()
  const { counter } = storeToRefs(demoStore)
  // 从 store 中获取其他值，再决定返回值
  // 这里演示获取 store 中 counter 的值
  console.log(`counter：${counter.value}`)
  return true
})

// 全局后置钩子
router.afterEach(() => {
  nProgress.done(true)
})