在Vue.js开发者的世界中，一个令人兴奋的新宠儿已经崭露头角，它就是Pinia。对于那些在状态管理方面追求卓越的人来说，Pinia是一片沃土，可以帮助你构建出令人叹为观止的应用程序。无论你是一名有经验的开发者，还是刚入门的菜鸟，本文将引导你踏上探索Pinia的旅程。从其卓越的性能到优雅的语法，以及无与伦比的可扩展性，你将发现Pinia的真正魅力。让我们一起揭开Vue.js最新热门状态管理库的神秘面纱吧！
简介
简介
Pinia 是Vue的存储库，它允许您跨组件/页面共享状态
Pinia 最初是为了探索Vuex的下一次迭代会是什么样子，结合了Vuex 5核心团队讨论中的许多想法
最终，我们意识到Pinia已经实现了我们在 Vuex5中想要的大部分内容，并决定实现它取而代之的是新的建议
与Vuex相比，Pinia提供了一个更简单的 API，具有更少的规范
文档
官方文档
中文文档
注意
pinia有个副作用，就是无法持久化，在浏览器刷新重置之后，会全部恢复默认
我们可以利用插件实现本地持久化存储
普通搭建
安装依赖
安装pinia
cnpm install pinia --save引入
编写main.js
import {createPinia} from "pinia"
const pinia=createPinia()
app.use(pinia)
持久搭建
安装依赖
安装pinia
cnpm install pinia --save
安装持久化插件
cnpm install --save pinia-plugin-persist
引入
编写main.js
import {createPinia} from "pinia"
import piniaPersist from 'pinia-plugin-persist'
const pinia=createPinia()
pinia.use(piniaPersist)
app.use(pinia)编写仓库
src\stores\dataStore.js
import {defineStore} from "pinia"
export const useDataStore = defineStore("data", {
state: () => {
return {
isLogin: false,//是否登录
}
},
//本地持久化(把数据存储到浏览器本地)
persist: {
enabled: true,//是否开启持久化
strategies: [
{
key: 'data', //自定义Key值,存储到本地时的key
storage: localStorage, // 选择存储方式：本地存储
},
],
}
})使用
引入
import {useDataStore} from "../../stores/dataStore"
const dataStore = useDataStore()
热更新
简介
pinia 支持热模块替换，因此你可以编辑store，并直接在您的应用程序中与它们交互，
而无需重新加载页面，允许您保持现有的状态，添加，甚至删除state，action和getter
开启【src/store/userInfo.js】
import { acceptHMRUpdate } from "pinia"
import axios from "axios"
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useCountStore, import.meta.hot))
}
核心概念
State
src/store/userInfo.js
import { defineStore } from "pinia"
export const useCountStore = defineStore("count",{
state:() =>{
return{
count:10
}
}
})
组件中使用
{{ store.count }}
import { useCountStore } from "../store/count"
const store = useCountStore();
组件中使用【结构赋值】
store使用解构赋值之后失去了响应式,我们可以用storeToRefs来解决找个问题
{{ count }}
import { storeToRefs } from "pinia"
import { useCountStore } from "../store/count"
const store = useCountStore();
const { count } = storeToRefs(store)Getters
src/store/userInfo.js
import { defineStore } from "pinia"
export const useCountStore = defineStore("count",{
state:() =>{
return{
count:10
}
},
getters:{
getCount:(state) => "当前Count："+ state.count
}
})
访问其他 getter
getters:{
getCount:(state) => "当前Count："+ state.count,
doubleCount(state){
return this.getCount + state.count
}
}
组件中使用
{{ store.getCount }}
import { useCountStore } from "../store/count"
const store = useCountStore();Actions
src/store/userInfo.js
import { defineStore } from "pinia"
export const useCountStore = defineStore("count", {
state: () => {
return {
count: 10
}
},
getters: {
getCount: (state) => "当前Count：" + state.count,
doubleCount(state) {
return this.getCount + state.count
}
},
actions: {
increment(num) {
this.count++
},
decrement(num) {
this.count--
}
}
})
组件中使用
import { useCountStore } from "../store/count"
const store = useCountStore();
function addCountHandler(){store.increment(5)}
function minCountHandler(){store.decrement(5)}插件
插件
简介
由于是底层 API，Pinia Store可以完全扩展，这一扩展就是插件
作用
向 Store 添加新属性
定义 Store 时添加新选项
为 Store 添加新方法
包装现有方法
更改甚至取消操作
实现本地存储等副作用
仅适用于特定 Store
基本使用
编写插件
src/stores/plugins
export function piniaStoragePlugins({ store }) {
console.log(store.count)
store.$subscribe(() => {
console.log(store.count)
})
}
引入插件
main.js
import { piniaStoragePlugins } from "./stores/plugins"
pinia.use(piniaStoragePlugins)
自定义数据持久化插件
编写插件
src/utils/storage
// 本地存储
export function setStorage(key,value){
localStorage.setItem(key,value)
}
export function getStorage(key){
return localStorage.getItem(key)
}
src/stores/plugins
// 实现插件，本地存储
import { setStorage, getStorage } from "../../utils/storage"
export function piniaStoragePlugins({ store }) {
if (getStorage("count")) {
store.count = getStorage("count")
}else{
setStorage("count", store.count)
}
store.$subscribe(() => {
setStorage("count", store.count)
})
}
引入插件
main.js
import { piniaStoragePlugins } from "./stores/plugins"
pinia.use(piniaStoragePlugins)第三方数据持久化插件
安装
cnpm install --save pinia-plugin-persist
引入插件
main.js
import piniaPersist from 'pinia-plugin-persist'
pinia.use(piniaPersist)
store仓库配置插件
import { defineStore } from "pinia"
export const useCountStore = defineStore("count", {
state: () => {
return {
count: 10
}
},
persist: {
enabled: true,//是否开启持久化
strategies: [
{
key: 'counts', //自定义Key值，存储到本地时的key
storage: localStorage, //选择存储方式：本地存储
},
],
}
})
使用
import {useDataStore} from "../../stores/dataStore"
const dataStore = useDataStore()
