Vue3全家桶之——Pinia状态管理

Pinia是一个专为Vue 3设计的现代化状态管理库，为Vue 3开发的，它提供了一种简单、可扩展和类型安全的方式来管理应用程序的状态。

与Vue 2中的Vuex相比，Pinia提供了更好的TypeScript支持，具有更好的类型定义和类型推断，可在编译时捕获错误，提供更高的代码可靠性和开发体验。它是专为Vue 3设计的，充分利用了Vue 3的新特性，如Composition API，以提供更直接、自然和灵活的状态管理体验。Pinia的核心概念是Store，它类似于Vuex中的模块，用于管理应用程序的状，可以将相关的状态和逻辑组合到单个Store中，使代码更清晰、结构更有组织性。除此之外海提供了许多有用的特性和功能，例如模块化组织、状态持久化、插件扩展等。

总的来说，Pinia是一个功能强大而灵活的状态管理解决方案，适用于各种规模的Vue 3应用程序。它提供了现代化的特性和工具，帮助我们更好地组织、管理和扩展应用程序的状态，同时提供了更好的类型安全和开发体验。

安装

运行安装命令

npm install pinia

在main.ts中引入

// main.ts import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const pinia = createPinia() const app = createApp(App) app.use(pinia) app.mount('#app')

初始化Store

新建stores文件，用于存放所有的store，然后创建index.ts。

同过 defineStore() 定义一个store，它接受一个参数作为仓库名称，也就是Id。它返回一个函数，默认我们使用user开头的风格来接收。第二个参数为一个Setup函数或者Option对象。

import { defineStore } from 'pinia' export const useUsersStore = defineStore('users', { // 其他配置... })

Option Store

这种方式熟悉Vuex的很了解，传入一个带有 state、actions 与 getters 属性的 Option 对象

export const userUsersStore = defineStore('users', { state: () => { return { name: 'zhangsan', current: 100 } }, getters: { getName: (state) => state.name + '你好帅' }, actions:{ getUserInfo { ... } } })

在 Option Store 中：

• state 是 store 的数据 data
• getters 是 store 的计算属性 computed
• actions 则是方法 methods

Setup Store

和Vue3 Composition API组合式API里setup函数相似，传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想要暴露出去的属性和方法的对象。

export const userUsersStore = defineStore('users', () => { const name = ref('张三') function get() { get.value + '你好帅' } return { name,  } })

在 Setup Store 中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions

监听

类似于 Vuex 的 subscribe 方法，可以通过 store 的 $subscribe() 方法侦听 state 及其变化

store.$subscribe((mutation, state) => { mutation.storeId // 'cart' console.log('state change', state) console.log('mutation', mutation.type) // 'direct' | 'patch object' | 'patch function' console.log('mutation2', mutation.storeId) // 'users' // 只有 mutation.type === 'patch object'的情况下才可用 // mutation.payload // 传递给 cartStore.$patch() 的补丁对象。 console.log('mutation3', mutation.payload) }, { detached: true })

默认情况下，state subscription 会被绑定到添加它们的组件上，当该组件被卸载时，它们将被自动删除。如果想在组件卸载后依旧保留它们，将 { detached: true } 作为第二个参数，以将 state subscription 从当前组件中分离，此时组件卸载后，订阅器还可以使用。

persist可以接收一个对象

export const userUsersStore = defineStore('users', { state: () => { return { name: 'inkun', current: 1 } }, persist: { key: 'my-custom-key', storage: sessionStorage, paths: ['current'], serializer: { deserialize: parse, serialize: stringify, }, beforeRestore: (ctx) => { console.log(`即将恢复 '${ctx.store.$id}'`) }, afterRestore: (ctx) => { console.log(`刚刚恢复完 '${ctx.store.$id}'`) }, } })

• key： 用于引用 storage 中的数据，默认使用store中的Id
• storage：数据存储位置，默认localStorage，可以该为sessionStorage
• paths：指定state中哪些数据需要持久化
• serializer：指定持久化时所使用的序列化方法，以及恢复 store 时的反序列化方法。
• beforeRestore：该 hook 将在从 storage 中恢复数据之前触发，并且它可以访问整个 PiniaPluginContext，这可用于在恢复数据之前强制地执行特定的操作。
• afterRestore：该 hook 将在从 storage 中恢复数据之后触发，并且它可以访问整个 PiniaPluginContext，这可用于在恢复数据之后强制地执行特定的操作。

全局配置

使用全局配置，就不用单独在每个store里面做配置，在使用pinia use的时候就可以通过createPersistedState函数设置。

// main.ts import { createPinia } from 'pinia' import { createPersistedState } from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use( createPersistedState({ storage: sessionStorage, paths: ['current'], }) )

createPersistedState里的配置会将每个申明persist: true的store添加上配置，但是每个单独store里的配置将会覆盖调全局声明中的对应项。

全局配置支持一下属性：

• storage
• serializer
• beforeRestore
• afterRestore