“探索超前的Pinia：解密Vue.js最新热门状态管理库“

 

在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()