1.pinia的簡單介紹 Pinia最初是在2019年11月左右重新設計使用Composition API的 Vue 商店外觀的實驗。 從那時起,最初的原則相同,但 Pinia 適用於 Vue 2 和 Vue 3 。 並且不需要你使用組合 API。 除了安裝和SSR之外,還有其他的 API是一樣的。 ...
1.pinia的簡單介紹
Pinia最初是在2019年11月左右重新設計使用Composition API的 Vue 商店外觀的實驗。
從那時起,最初的原則相同,但 Pinia 適用於 Vue 2 和 Vue 3 。
並且不需要你使用組合 API。
除了安裝和SSR之外,還有其他的 API是一樣的。
並且這些針對 Vue 3 ,併在必要時提供 Vue 2 的相關註釋。
以便 Vue 2 和 Vue 3 的用戶可以閱讀!
2.為什麼要使用Pina?
Pinia 是 Vue 的存儲庫,
允許您跨組件/頁面共用狀態。
如果您的組合 API,您可能會認為您可以使用簡單的export const state = reactive({})
這對於單頁應用程式來說是正確的,
但如果它是伺服器端的外觀,將您的應用程式顯示給安全漏洞。
但即使在小型單頁應用程式中,您也可以從使用 Pinia 中獲得好處:
1.開發工具支持
2.動作、追蹤的跟蹤
3.熱模塊更換
4.為 JS 用戶提供適當功能的 TypeScript 支持或自動完成
5.伺服器端渲染支持
安裝
npm install pinia --save
3.創建文件夾和文件-存放數據
在新建 src/store目錄併在其下麵創建 index.ts文件,並導出這個文件
// src/store/index.ts下的代碼
import { createPinia } from 'pinia'
const store = createPinia()
export default store
在 main.ts 中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
<!-- 引入 -->
import store from "./store/index"
<!-- 使用store -->
createApp(App).use(router).use(store).mount('#app')
需求描述
假設我們現在有好幾個模塊。有user模塊。admin模塊。
我們想對這模塊中的數據進行管理。
為了管理方便,後面易於維護。我們決定將這些模塊進行拆分。
於是我們在store下創建 user.ts 文件,管理這個user模塊的數據。
user.ts下的數據
//src/store/user.ts 文件
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'userkey', // id必填,且需要唯一
// state是存放數據的
state: () => {
return {
name: '於途',
likelist:[],
sex:'男',
work:'寫代碼',
heigt:'1.70cm'
}
},
})
defineStore的介紹
defineStore 接收兩個參數.
第一個參數:必須是唯一的,多個模塊千萬千萬不能重名。
因為Pinia 會把所有的模塊都掛載到根容器上
第二個參數是一個對象,裡面的選項state和 Vuex 差不多
4.獲取store中值的第一種方法
<template>
<div class="pinia">
<h2> 學習pinia </h2>
<div> {{ userStore }} </div>
<div>姓名:{{ userStore.name }}</div>
<div>性別:{{ userStore.sex }}</div>
<div>工作:{{ userStore.work }}</div>
<div>身高:{{ userStore.heigt }}</div>
</div>
</template>
<script setup lang='ts'>
// 引入store中暴露出去的方法
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
</script>
獲取store中值的第二種方法-computed
<template>
<div class="pinia">
<h2> 學習pinia </h2>
<div>姓名:{{useStoreName}}</div>
<div>性別:{{useStoreSex}}</div>
</div>
</template>
<script setup lang='ts'>
// 引入store中暴露出去的方法
import { computed } from 'vue'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
// 使用 computed取獲取值
const useStoreName = computed(() => userStore.name)
const useStoreSex = computed(() => userStore.sex)
</script>
提出問題
如果對象上有多個屬性,可以進行結構嗎?
可以的!
使用 pinia 提供的 storeToRefs
我們來看下怎去使用
5.pinia 提供的 storeToRefs進行結構
<template>
<div class="pinia">
<h2> 學習pinia </h2>
<div>姓名:{{ asName }}</div>
<div>性別:{{ mysex }}</div>
<div>工作:{{ work }}</div>
<div>身高:{{ heigt }}</div>
</div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
// asName 和 mysex 是我取的別名
const { name : asName ,sex:mysex, work, heigt } = storeToRefs(userStore)
</script>
6.如何修改 state 中的數據
修改 state 中的數據,可以通過 actions 下的方法。
然後調用 updataName 就可以取修改 state中的name值了
//src/store/user.ts 文件
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'userkey', // id必填,且需要唯一
// state是存放數據的
state: () => {
return {
name: '於途',
likelist:[],
sex:'男',
work:'寫代碼',
heigt:'1.70cm'
}
},
// actions 可以修改state中的值,這裡面提供方法
actions:{
// 修改name中的數據
updataName(name:string){
this.name=name
},
},
})
調用方法,修改state中的name
<template>
<div class="pinia">
<h2> 學習pinia </h2>
<div>姓名:{{ asName }}</div>
<div>性別:{{ mysex }}</div>
<div>工作:{{ work }}</div>
<div>身高:{{ heigt }}</div>
<el-button type="primary" @click="changeHander">修改name</el-button>
</div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
// asName 和 mysex 是我取的別名
const { name : asName ,sex:mysex, work, heigt } = storeToRefs(userStore)
const changeHander=()=>{
userStore.updataName('小玉兔')
// 這樣我發現也可以,但是不推薦這樣使用。
// 統一通過 actions 中的方法去修改值
userStore.work='我換工作了'
}
</script>
7.getters的使用
//src/store/user.ts 文件
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'userkey', // id必填,且需要唯一
// state是存放數據的
state: () => {
return {
name: '於途',
likelist:[],
sex:'男',
work:'寫代碼',
heigt:'1.70cm',
age:26,
}
},
// actions 可以修改state中的值,這裡面提供方法
actions:{
// 修改name中的數據
updataName(name:string){
this.name=name
},
},
// Getter 完全等同於 Store 狀態的計算值
getters:{
// 將姓名進行更改
getName: (state) => {
return state.name + 'hahha~!'
}
}
})
//使用的頁面.vue
<template>
<div class="pinia">
<h2> 學習pinia </h2>
<div>姓名:{{ asName }}</div>
<div>性別:{{ mysex }}</div>
<div>工作:{{ work }}</div>
<div>身高:{{ heigt }}</div>
<div>身高:{{ age }}</div>
<!-- 這裡就直接使用了getters中的方法 -->
姓名:{{ userStore.getName }}
<el-button type="primary" @click="changeHander">修改name</el-button>
</div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
// asName 和 mysex 是我取的別名
const { name : asName ,sex:mysex,
work, heigt,age
} = storeToRefs(userStore)
const changeHander=()=>{
userStore.updataName('小玉兔')
}
</script>
對於getters的使用的說明
Getter 完全等同於 Store 狀態的計算值 computed.
並不會影響原始數據
9.非同步actions-設置state中的值
//src/store/user.ts 文件
import { defineStore } from 'pinia'
// 引入介面
import { getUser } from "../https/api";
export const useUserStore = defineStore({
id: 'userkey', // id必填,且需要唯一
// state是存放數據的
state: () => {
return {
name: '於途',
likelist:[],
}
},
// actions 可以修改state中的值,這裡面提供方法
actions:{
// 修改name中的數據 同步
updataName(name:string){
this.name=name
},
// 非同步-獲取遠端的數據
loadUserList(){
getUser({}).then(res=>{
this.likelist = res
})
}
// 使用await和async 第二種方法
// async loadUserList(){
// const list = await getUser({})
// console.log('list',list)
// this.likelist = list
// }
},
})
使用的頁面
<template>
<div class="pinia">
<h2> 學習pinia </h2>
數據 {{ userStore.likelist}}
<el-button type="primary" @click="changeHander">獲取遠端數據</el-button>
</div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
const changeHander=()=>{
// 非同步調用
userStore.loadUserList() // 載入所有數據
}
10.actions 中互相調用方法
很多時候,我們可能會出現 actions中互相去調用方法。
這個時候怎麼去處理呢?
通過this.方法名(參數)
//src/store/user.ts 文件
import { defineStore } from 'pinia'
// 引入介面
import { getUser } from "../https/api";
export const useUserStore = defineStore({
id: 'userkey', // id必填,且需要唯一
// state是存放數據的
state: () => {
return {
name: '於途',
likelist:[],
}
},
// actions 可以修改state中的值,這裡面提供方法
actions:{
// 修改name中的數據 同步
updataName(name:string){
this.name=name
},
// 非同步-獲取遠端的數據
loadUserList(){
getUser({}).then(res=>{
this.likelist = res
this.sayHi('互相調用方法')
})
},
sayHi(mess:string){
console.log('loadUserList方法中調用了sayHi',mess)
}
},
})
使用的頁面.vue
<template>
<div class="pinia">
<h2> 學習pinia </h2>
數據 {{ userStore.likelist}}
<el-button type="primary" @click="changeHander">獲取遠端數據</el-button>
</div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
const changeHander=()=>{
// 非同步調用
userStore.loadUserList() // 載入所有數據
}
</script>
11.數據持久化-sessionStorage 或 localStorage
我們都知道,vuex刷新後,數據會丟失。
這個時候我們需要將數據進行持久化。
我們可以考慮sessionStorage或者localStorage
//src/store/user.ts 文件
import { defineStore } from 'pinia'
// 引入介面
import { getUser } from "../https/api";
export const useUserStore = defineStore({
id: 'userkey', // id必填,且需要唯一
// state是存放數據的
state: () => {
return {
// 數據持久化使用的是sessionStorage
name: sessionStorage.getItem('name') ? sessionStorage.getItem('name') : '於途',
likelist:[],
}
},
actions:{
// 修改name中的數據 同步
updataName(name:string){
sessionStorage.setItem('name', name)
this.name=name
},
},
})
<template>
<div class="pinia">
<h2> 學習pinia </h2>
姓名 {{ userStore.name}}
<el-button type="primary" @click="changeHander">該變值</el-button>
</div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
const changeHander=()=>{
// 非同步調用
userStore.updataName('我改變了姓名')
}
</script>
12.跨模塊修改數據
雖然我不建議跨模塊修改數據。
因為這樣可能會導致你的應用數據流向變得難以理解。
但是有些時候確實需要跨模塊修改數據。
那麼pinia怎麼去處理跨模塊修數據呢?
下麵我們一起來探索跨模塊修改數據!
假設admin模塊需要去修改user模塊中的數據
admin.ts代碼如下
//src/store/admin.ts 文件
import { defineStore } from 'pinia'
// 引入user模塊
import { useUserStore } from './user'
export const adminUserStore = defineStore({
id: 'adminkey',
actions:{
// 通過引入的useUserStore模塊,然後去觸發它裡面對應的方法。
editUserModuleValue(name:string){
// userStore可以看見整個user模塊中的數據和方法
let userStore=useUserStore()
console.log('userStore',userStore)
userStore.updataName(name)
}
},
})
user.ts代碼
//src/store/user.ts 文件
import { defineStore } from 'pinia'
// 引入介面
export const useUserStore = defineStore({
id: 'userkey', // id必填,且需要唯一
// state是存放數據的
state: () => {
return {
name: '於途',
likelist:[],
sex:'男',
work:'寫代碼',
heigt:'1.70cm'
}
},
actions:{
// 修改name中的數據 同步
updataName(name:string){
this.name=name
},
},
})
頁面的使用
<template>
<div class="pinia">
<h2> 學習pinia </h2>
姓名 {{ userStore.name}}
<el-button type="primary" @click="changeHander">該變值</el-button>
</div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
// 引入admin模塊
import { adminUserStore } from '../../store/admin'
// 引入user模塊
import { useUserStore } from '../../store/user'
const adminStore = adminUserStore()
const userStore = useUserStore()
// dmin模塊需要去修改user模塊中的數據
const changeHander=()=>{
adminStore.editUserModuleValue('數據數據')
}
</script>
尾聲
如果你覺得我寫的不錯的話,可以給我推薦、打賞、評論!
上一個給我打賞的小伙伴都已經找到女朋友了!
咦!你不信,不信你給我打賞看一下!
保準你追到到喜歡的Ta!
你不會追,哎!難受。
我教你,你可以這樣說:
小生不才,斗膽-問,不知姑娘是否心系他人。
感情之事,在下不敢兒戲!
如若姑娘早已心系他人。那在下便不再打擾。
如若有所唐突還望姑娘多加體諒!
若姑娘非我良人,那在下就不庸人自惱。
在下怕越陷越深,還望姑娘儘早告知!話已至此,我便先在此謝過!
拿去不謝!回頭告訴我結果啊!
咦!抓住一個沒有打賞的小伙伴!
遇見問題,這是你成長的機會,如果你能夠解決,這就是收穫。
作者:明月人倚樓出處:https://www.cnblogs.com/IwishIcould/
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯繫你;(っ•̀ω•́)っ✎⁾⁾!
如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個“推薦”哦,或者關註博主,在此感謝!
萬水千山總是情,打賞5毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯繫你;(っ•̀ω•́)っ✎⁾⁾!
支付寶 微信 本文版權歸作者所有,歡迎轉載,未經作者同意須保留此段聲明,在文章頁面明顯位置給出原文連接如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。