Vue3中使用pinia的示例代碼
更新時間：2022年12月15日 09:54:26 作者：-不要說話-
這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1、安裝：npm install pinia
2、創(chuàng)建store文件并配置內(nèi)部的index.js文件
import { defineStore } from 'pinia' //引入pinia
//這里官網(wǎng)是單獨導(dǎo)出 是可以寫成默認(rèn)導(dǎo)出的 官方的解釋為大家一起約定倉庫用use打頭的單詞 固定統(tǒng)一小倉庫的名字不易混亂
export const useCar=defineStore("test",{
state: () =>{
return ({
msg:"這是pinia的數(shù)據(jù)",
name:"小獅子",
age:18
}) //為了避免出錯，返回的值用()包起來
}
})
3、main.js文件中配置
import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
import { createPinia } from 'pinia' //引入pinia
app.use(createPinia())
app.mount('#app') 4、組件使用
<template>
<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
<button @click="change1">修改store.name</button>
<router-view></router-view>
</template>
<script setup>
import {useCar} from "../store/index.js" //將之前配置的pinia文件夾中的index.js文件引入
let store=useCar() //接收
console.log(store)
let change1=()=>{
store.name="小羊" //修改pinia里面的數(shù)據(jù)
console.log(store.name)
}
</script>
<style scoped>
h1{
width: 400px;
height:200px;
background-color:deeppink;
}
</style>效果圖
點擊按鈕，界面變化
說明成功修改了pinia里面的數(shù)據(jù)，且界面刷新證明這種直接修該pinia數(shù)據(jù)的方式依然是響應(yīng)式數(shù)據(jù)。
但如果在接收pinia數(shù)據(jù)時，進行解構(gòu)則不再是響應(yīng)式數(shù)據(jù)，需要使用toRefs
toRefs
4-1、 store.$reset()
將狀態(tài) 重置 到其初始值
當(dāng)我們接收到pinia數(shù)據(jù)且對其數(shù)據(jù)進行了大量修改又想還原時，調(diào)用此方法就可以將接收的pinia數(shù)據(jù)全部重置還原
注意：store.$reset() 中的store是自己設(shè)定的接收變量，重點是 .$reset()
<template>
<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
<button @click="change1">修改store.name</button>
<button @click="reset">reset</button>
<router-view></router-view>
</template>
<script setup>
import {useCar} from "../store/car.js"
let store=useCar()
console.log(store)
let change1=()=>{
store.name="小羊"
console.log(store.name)
}
let reset=()=>{ //初始化pinia數(shù)據(jù)
store.$reset()
}
</script>
<style scoped>
h1{
width: 400px;
height:200px;
background-color:deeppink;
}
</style>
在之前的案例中修改了pinia的name屬性值
此時我們點擊reset按鈕，則會重置pinia的所有數(shù)據(jù)
4-2 store.$patch
群體修改，可以將pinia的數(shù)據(jù)進行同一修改
特點：批量修改但狀態(tài)只刷新一次
<template>
<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
<button @click="change1">修改store.name</button>
<button @click="reset">reset</button>
<button @click="fn">fn</button>
<router-view></router-view>
</template>
<script setup>
import {useCar} from "../store/car.js"
let store=useCar()
console.log(store)
let change1=()=>{
store.name="小羊"
console.log(store.name)
}
let reset=()=>{ //重置
store.$reset()
}
function fn(){
//批量修改
store.$patch({
name:"小羊",
age:20,
})
}
</script>
<style scoped>
h1{
width: 400px;
height:200px;
background-color:deeppink;
}
</style>
點擊fn按鈕后
說明批量修改成功
5.訂閱修改
//可以通過 store 的 $subscribe() 方法查看狀態(tài)及其變化,通過patch修改狀態(tài)時就會觸發(fā)一次
store.$subscribe((mutation, state) => {
// 每當(dāng)它發(fā)生變化時，將整個狀態(tài)持久化到本地存儲
localStorage.setItem('test', JSON.stringify(state))
})
6.Getter
Getter 完全等同于 Store 狀態(tài)的 計算值。 它們可以用 defineStore() 中的 getters 屬性定義。 他們接收“狀態(tài)”作為第一個參數(shù)以鼓勵箭頭函數(shù)的使用：(ps:雖然鼓勵但是依然提供了非es6玩家的使用方式 內(nèi)部可以用this代表state)
//store/index.js文件
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
},
})
//組件中直接使用: <p>Double count is {{ store.doubleCount }}</p>
7、Actions
在pinia中沒有提供mutaion 因為Actions就夠了(它可以異步同步的統(tǒng)一修改狀態(tài))
之所以提供這個功能 就是為了項目中的公共修改狀態(tài)的業(yè)務(wù)統(tǒng)一
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
actions: {
increment() {
this.counter++//1.有this
},
randomizeCounter(state) {//2.有參數(shù) 想用哪個用哪個
state.counter = Math.round(100 * Math.random())
},
randomizeCounter(state) {
//異步函數(shù)
axios("/test").then(res=>{
state.counter = res.data.length
})
}
},
})
//組件中的使用:
setup() {
const store = useStore()
store.increment()
store.randomizeCounter()
}
到此這篇關(guān)于Vue3中使用pinia的文章就介紹到這了,更多相關(guān)Vue3中使用pinia內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue修改數(shù)據(jù)的時候,表單值回顯不正確問題及解決
這篇文章主要介紹了vue修改數(shù)據(jù)的時候，表單值回顯不正確的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
Windows系統(tǒng)下使用nginx部署vue2項目的全過程
nginx是一個高性能的HTTP和反向代理服務(wù)器,因此常用來做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項目的相關(guān)資料,需要的朋友可以參考下2023-03-03
element?el-tooltip實現(xiàn)自定義修改樣式
本文主要介紹了element?el-tooltip實現(xiàn)自定義修改樣式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue使用mind-map實現(xiàn)在線思維導(dǎo)圖
Vue中的Mind-Map通常是指使用Vue.js這個前端框架構(gòu)建的思維導(dǎo)圖組件或庫,它可以幫助開發(fā)者在Web應(yīng)用中創(chuàng)建動態(tài)、交互式的思維導(dǎo)圖,讓用戶可以直觀地組織信息和結(jié)構(gòu)化數(shù)據(jù),本文介紹了Vue使用mind-map實現(xiàn)在線思維導(dǎo)圖,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue中實現(xiàn)一個項目里兼容移動端和pc端問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue2.0設(shè)置proxyTable使用axios進行跨域請求的方法
這篇文章主要介紹了vue2.0設(shè)置proxyTable使用axios進行跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
本篇文章給大家詳細(xì)介紹了vue跨域處理問題的方式以及相關(guān)知識點介紹，對此有興趣的朋友學(xué)習(xí)下。2018-02-02
vue列表數(shù)據(jù)發(fā)生變化指令沒有更新問題及解決方法
這篇文章主要介紹了vue中使用指令，列表數(shù)據(jù)發(fā)生變化指令沒有更新問題，本文給出了解決辦法,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Electron-vue腳手架改造vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Vue中的?watch監(jiān)聽屬性詳情，mputed計算屬性用來監(jiān)聽多個數(shù)據(jù)；watch?監(jiān)聽單個數(shù)據(jù)；本文將具體介紹的是?watch監(jiān)聽屬性，感興趣的小伙伴可以參考一下文章的具體內(nèi)容，希望對你有所幫助2021-12-12