一盏茶的时间,带你轻松上手Pinia
岸边的风：个人主页
个人专栏 :《 VUE 》 《 javaScript 》
⛺️ 生活的理想，就是为了理想的生活 !
目录
前言
创建 Pinia
Option Store
Pinia 提供多种选项配置 Store:
state
getters
actions
persist
使用 Store
读取状态
调用 Actions
多个 Store
Setup Store
数据持久化
Pinia 插件
购物车示例
Pinia 插件
实现一个持久化插件
写在最后
前言
Pinia,让状态管理再无难题!
作为Vue.js官方推荐的新星级管理库,Pinia为开发者带来前所未有的顺滑体验。你还在为复杂难懂的状态管理代码头疼吗?别急,用Pinia你可以告别一切烦恼!
本指南将为您还原Pinia的奥秘,您将掌握它独特的简洁API使用技巧,迅速成为状态管理的专家级大师!无论您是新手还是老鸟,这里的专业指导将助您在项目中如虎添翼,以最轻松的姿态管理复杂应用状态。
快来 Reshape Your State Management Skills吧!我们一起领略 Pinia的魅力!
创建 Pinia
在 main.js 中导入 createPinia 并使用:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
可以通过 app.config.globalProperties.$pinia 访问 Pinia 实例。
Option Store
与 Vue 的选项式 API 类似，我们也可以传入一个带有
state、actions与getters属性的 Option 对象（废弃了Mutations）
使用 defineStore API 定义 Store:
import { defineStore } from 'pinia'
export const useMainStore = defineStore('main', {
// state
state: () => {
return {
counter: 0
}
},
// getters
getters: {
doubleCount(state) {
return state.counter * 2
}
},
// actions
actions: {
increment() {
this.counter++
}
}
})
接收唯一 ID 作为第一个参数
state、getters、actions 定义方式与 Vue 组件类似
可以直接通过
this访问状态
Pinia 提供多种选项配置 Store:
state
定义响应式状态:
state: () => {
return {
count: 0
}
}
必须是一个返回状态对象的函数。
getters
定义 getter 计算属性:
getters: {
double(state) {
return state.count * 2
}
}
getter 可以接收参数:
getters: {
getMessage(state) {
return (name = 'Vue') => `Hello ${name}`
}
}
actions
定义方法修改状态:
actions: {
increment(amount = 1) {
this.count += amount
}
}
actions 支持同步和异步操作。
persist
配置数据持久化,需要使用插件:
persist: {
enabled: true,
strategies: [
{
key: 'my_store',
storage: localStorage,
},
]
}
使用 Store
通过 useXxxStore() 获取 Store 实例:
import { useMainStore } from '@/stores/main'
export default {
setup() {
const main = useMainStore()
main.increment()
}
}
读取状态、调用 actions 同 Vue 组件。
读取状态
// 直接读取
const count = main.count
// 通过计算属性
const double = computed(() => main.doubleCount)
// 通过 storeToRefs
const { count } = storeToRefs(main)
调用 Actions
main.increment()
const message = main.getMessage('Vue')
多个 Store
可以拆分多个 Store 管理不同模块状态:
stores
|- user.js
|- product.js
单独导出每个 Store 并在组件中使用:
import { useUserStore } from '@/stores/user'
import { useProductStore } from '@/stores/product'
export default {
setup() {
// ...
}
}
Store 可以互相引用:
// userStore.js
import { useProductStore } from './product'
export const useUserStore = defineStore({
// 可以直接使用 productStore
})
Setup Store
个人比较倾向这种语法
也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 setup 函数 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
})
在 Setup Store 中：
ref()就是state属性
computed()就是getters
function()就是actions
Setup store 比 Option Store 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何组合式函数。不过，请记住，使用组合式函数会让 SSR 变得更加复杂。
数据持久化
Pinia 默认状态不持久化,可以通过插件实现持久化:
npm install pinia-plugin-persistedstate
import persistedState from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persistedState)
在 Store 中配置 persist:
export const useUserStore = defineStore({
persist: {
enabled: true
}
})
配置 storage 指定存储位置:
persist: {
storage: sessionStorage
}
Pinia 插件
Pinia 生态已有许多插件,可以扩展更多功能:
pinia-plugin-persistedstate:数据持久化
pinia-plugin-debounce:防抖修改状态
pinia-plugin-pinia-observable:转换成 Observable
使用插件:
import piniaPluginPersist from 'pinia-plugin-persist'
pinia.use(piniaPluginPersist)
Devtools
Pinia支持Vue devtools
购物车示例
我们来通过一个购物车的例子看看 Pinia 的用法:
// store.js
import { defineStore } from 'pinia'
export const useCartStore = defineStore('cart', {
state: () => {
return {
items: []
}
},
getters: {
total(state) {
return state.items.reduce((total, item) => {
return total + item.price
}, 0)
}
},
actions: {
addItem(item) {
this.items.push(item)
},
removeItem(id) {
this.items = this.items.filter(i => i.id !== id)
}
}
})
在组件中使用:
// Cart.vue
import { useCartStore } from '@/stores/cart'
setup() {
const cart = useCartStore()
return {
items: cart.items,
total: cart.total
}
}
可以看出代码非常简洁直观。
Pinia 插件
Pinia 插件是一个函数，可以选择性地返回要添加到 store 的属性。它接收一个可选参数，即 context。
export function myPiniaPlugin(context) {
context.pinia // 用 `createPinia()` 创建的 pinia。
context.app // 用 `createApp()` 创建的当前应用(仅 Vue 3)。
context.store // 该插件想扩展的 store
context.options // 定义传给 `defineStore()` 的 store 的可选对象。
// ...
}
然后用 pinia.use() 将这个函数传给 pinia：
pinia.use(myPiniaPlugin)
插件只会应用于「在 pinia 传递给应用后」创建的 store，否则它们不会生效。
实现一个持久化插件
getStorage函数：根据提供的key从本地存储中读取数据。如果数据无法解析或不存在，则返回null。
setStorage函数：将提供的值转换为 JSON 格式，并以指定的key保存到本地存储中。
DEFAULT_KEY常量：表示默认的本地存储键名前缀。如果在选项中未提供自定义键名，将使用该默认键名。
Options类型：定义了插件选项对象的类型，包含key（本地存储键名前缀）和needKeepIds（需要进行持久化的 Pinia 存储的 ID 数组）两个可选属性。piniaPlugin` 函数：这是主要的插件函数，它接收一个选项对象，并返回一个用于处理 Pinia 存储的函数。
import { PiniaPluginContext } from "pinia";
import { toRaw } from "vue";
// Get data from local storage by key
export function getStorage(key) {
const data = localStorage.getItem(key);
try {
return JSON.parse(data);
} catch (error) {
return null;
}
}
// Set data to local storage with a key
export function setStorage(key, value) {
const data = JSON.stringify(value);
localStorage.setItem(key, data);
}
const DEFAULT_KEY = "pinia";
type Options = {
key?: string;
needKeepIds?: string[];
};
const piniaPlugin = ({ key = DEFAULT_KEY, needKeepIds = [] }: Options) => {
return (context: PiniaPluginContext) => {
const { store } = context;
const data = getStorage(`${key}-${store.$id}`);
const subscribeToStore = () => {
if (needKeepIds.length === 0 || needKeepIds.includes(store.$id)) {
setStorage(`${key}-${store.$id}`, toRaw(store.$state));
}
};
store.$subscribe(subscribeToStore);
return {
...data,
};
};
};
export default piniaPlugin;
写在最后
Pinia是Vue.js的新一代状态管理解决方案,由Vue核心团队开发,其设计理念简洁直观,易于上手使用。相较于Vuex,Pinia解决了其过于复杂的问题,提供了更符合Vue理念的状态管理方式。
Pinia通过组合式Store结构,实现了状态、获取器、操作行为的逻辑分离。开发者可以轻松地创建Store模块,在Vue组件内直接使用$store语法访问状态,无需导入映射函数,语法非常简洁。同时Pinia还提供了完整的TypeScript支持,可以为State、Getters、Actions添加类型检测。
除此之外,Pinia还有模块热更新,无需重载页面即可看到状态变更,开发调试体验更佳。同时支持Vue DevTools进行调试,也提供插件机制等拓展功能。总的来说,Pinia是一个非常轻量、易于理解和使用的状态管理方案,可以极大地提升Vue项目的开发效率。它是Vue生态中简洁高效管理状态的首选解决方案。
