淘先锋技术网

首页 1 2 3 4 5 6 7

 efb581ca3d3549fbb9cc99e610313f82.png

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