快捷導(dǎo)航

Vue項(xiàng)目新一代狀態(tài)管理工具Pinia的使用教程

更新時(shí)間：2022年11月03日 10:58:59 作者：不叫貓先生

pinia是一個(gè)輕量級(jí)的狀態(tài)管理庫(kù),屬于 vue3 生態(tài)圈新的成員之一,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目新一代狀態(tài)管理工具Pinia的使用教程,需要的朋友可以參考下

前言

Pinia官網(wǎng)介紹說(shuō)：Pinia 是 Vue 的存儲(chǔ)庫(kù)，它允許您跨組件/頁(yè)面共享狀態(tài)。Vuex同樣可以作為狀態(tài)管理工具，那么兩者有什么區(qū)別呢？

Pinia與Vuex的區(qū)別

pinia只有store、getter、actions，么有mutations，簡(jiǎn)化了狀態(tài)管理的操作
pinia模塊劃分不需要modules，
pinia自動(dòng)化代碼拆分
pinia對(duì)ts支持很好以及vue3的composition API
pinia體積更小，性能更好

使用Pinia

defineStore( ) 方法的第一個(gè)參數(shù)：容器的名字，名字必須唯一，不能重復(fù)
defineStore( ) 方法的第二個(gè)參數(shù)：配置對(duì)象，放置state，getters，actions
state 屬性：用來(lái)存儲(chǔ)全局的狀態(tài)
getters屬性：用來(lái)監(jiān)視或者說(shuō)是計(jì)算狀態(tài)的變化的，有緩存的功能
actions屬性：修改state全局狀態(tài)數(shù)據(jù)，可以是異步也可以是同步
Pinia可以用于vue2.x也可以用于vue3.x中

安裝

yarn add pinia -S

main.js引入

import {createApp} from "vue"
import App from "./app.vue"
import store from "./store/index.js"
const app = createApp(App);
const store = createPinia();
app.use(store).mount("#app")

在store文件夾下新建test.js

import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
    state:()=>{
         tname:"test",
         tnum:0,
    },
    getters:{
       changeTnum(){
           console.log("getters")
           this.tnum++;
       }
    },
    actions:{
       addNum(val){
          this.tnum += val
       }
    },
    //持久化存儲(chǔ)配置
    presist:{
         enable:true,//
         strategies:[
            {
            key:"testId",
            storage:localStorage,
            paths:['tnum']
            } 
         ]
    }
})

在用actions的時(shí)候，不能使用箭頭函數(shù)，因?yàn)榧^函數(shù)綁定是外部的this。actions里的this指向當(dāng)前store

在store文件夾下新建index.js，便于管理

import {createPinia} from "pinia"
const store = createPinia();
export default store

新建A.vue組件，引入store模塊和storeToRefs方法
storeToRefs：解構(gòu)store中的數(shù)據(jù)，使之成為響應(yīng)式數(shù)據(jù)

<template>
    <div>
        <div> {{tname}}</div>
        <div> {{tid}}</div>
        <div> tnum: {{tnum}}</div>
        <div> {{tchangeNum}}</div>
        <div><button @click="tchangeName">修改</button></div>
        <div> <button @click="treset">重置</button></div>
        <div @click="actionsBtn">actionsBtn</div>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store/user'
import { useTest } from '../store/test.js'
const testStore = useTest();
let { tname, tchangeNum, tnum } = storeToRefs(testStore)
</script>

直接修改數(shù)據(jù)的兩種方式

直接修改數(shù)據(jù)與使用$path修改數(shù)據(jù)相比，官方已經(jīng)明確表示$patch的方式是經(jīng)過(guò)優(yōu)化的，會(huì)加快修改速度，對(duì)程序的性能有很大的好處。所以如果你是多條數(shù)據(jù)同時(shí)更新?tīng)顟B(tài)數(shù)據(jù)，推薦使用$patch方式更新。
雖然可以直接修改，但是出于代碼結(jié)構(gòu)來(lái)說(shuō)，全局的狀態(tài)管理還是不要直接在各個(gè)組件處隨意修改狀態(tài)，應(yīng)放于actions中統(tǒng)一方法修改（piain沒(méi)有mutation）。

//直接修改數(shù)據(jù)
tchangeName(){
     tname.value = "測(cè)試數(shù)據(jù)"；
     tnum.value++;
}
//當(dāng)然也可以使用`$path`批量修改
tchangeName(){
     testStore.$path(state=>{
          state.tname = "測(cè)試數(shù)據(jù)"；
          state.value = 7;
     })
}

使用actions修改數(shù)據(jù)

直接調(diào)用actions中的方法，可傳參數(shù)

const actionsBtn = (){
      testStore.addNum(5)  
}

重置state中數(shù)據(jù)

store中有$reset方法，可以直接對(duì)store中數(shù)據(jù)重置

const treset = (){
    testStore.$reset()
}

Pinia持久化存儲(chǔ)

實(shí)現(xiàn)持久化存儲(chǔ)，需要配合以下插件使用

yarn add  pinia-plugin-persist

配置store文件夾下的index.js文件，引入pinia-plugin-presist插件

import {createPinia} from "pinia"
import piniaPluginPresist from "pinia-plugin-presist"
const store = createPinia();
store.use(piniaPluginPresist)
export default store

配置stroe文件夾下的test.js文件，使用presist屬性進(jìn)行配置

import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
    state:()=>{
         tname:"test",
         tnum:0,
    },
    getters:{
       changeTnum(){
           console.log("getters")
           this.tnum++;
       }
    },
    actions:{
       addNum(val){
          this.tnum += val
       }
    },
    //持久化存儲(chǔ)配置
    presist:{
         enable:true,//
         strategies:[
            {
            key:"testId",
            storage:localStorage,
            paths:['tnum']
            } 
         ]
    }
})

enable:true，開(kāi)啟持久化存儲(chǔ)，默認(rèn)為使用sessionStorage存儲(chǔ)
- - strategies，進(jìn)行更多配置
- - key，不設(shè)置key時(shí)，storage的key為definePinia的第一個(gè)屬性，設(shè)置key值，則自定義storage的屬性名
storage:localStorage，設(shè)置緩存模式為本地存儲(chǔ)
paths，不設(shè)置時(shí)對(duì)state中的所用數(shù)據(jù)進(jìn)行持久化存執(zhí)，設(shè)置時(shí)只針對(duì)設(shè)置的屬性進(jìn)行持久化存儲(chǔ)

Pinia模塊化實(shí)現(xiàn)

模塊化實(shí)現(xiàn)即在store對(duì)要使用的模塊新建一個(gè)js文件，比如user.js文件。然后配置內(nèi)容跟其他模塊一樣，根據(jù)自己需求進(jìn)行設(shè)置，然后在對(duì)應(yīng)頁(yè)面引入。

Pinia中store之間互相調(diào)用

比如：test.js獲取user.js中state的name屬性值，在test.js引入user.js

import { defineStore } from 'pinia'
import { userStore } from "./user.js"
export const useTest = defineStore("testId", {
	state: () => {
		return {
			tid: "111",
			tname: "pinia",
			tnum: 0
		}
	},
	getters: {
		tchangeNum() {
			console.log('getters')
			return this.tnum + 100
		}
	},
	actions: {
		tupNum(val) {
			console.log('actions')
			this.tnum += val;
		},
		getUserData() {
			console.log(useStore().name);
			return useStore().name;
		},
	},
	persist: {
		//走的session
		enabled: true,
		strategies: [
			{
				key: "my_testId",
				storage: localStorage,
				paths: ['tnum']
			}
		]
	}
})

user.js中

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0,
      name: '張三'
    }
  }
})

A.vue組件中，調(diào)用test.js中getUserData方法就可以得到uesr.js中的name值

const actionBtn = () => {
    testStore.getUserData()
};

總結(jié)

到此這篇關(guān)于Vue項(xiàng)目新一代狀態(tài)管理工具Pinia使用的文章就介紹到這了,更多相關(guān)Vue Pinia狀態(tài)管理工具使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue項(xiàng)目新一代狀態(tài)管理工具Pinia的使用教程

目錄

前言

Pinia與Vuex的區(qū)別

使用Pinia

直接修改數(shù)據(jù)的兩種方式

使用actions修改數(shù)據(jù)

重置state中數(shù)據(jù)

Pinia持久化存儲(chǔ)

Pinia模塊化實(shí)現(xiàn)

Pinia中store之間互相調(diào)用

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具