vue下一代狀態管理Pinia.js 保證你看的明明白白!

来源:https://www.cnblogs.com/IwishIcould/archive/2022/04/25/16191212.html
-Advertisement-
Play Games

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毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!

想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯繫你;(っ•̀ω•́)っ✎⁾⁾!

支付寶 微信 本文版權歸作者所有,歡迎轉載,未經作者同意須保留此段聲明,在文章頁面明顯位置給出原文連接
如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 作者:程潤科、錢芬 視頻:錢芬 上一篇文章我們演示瞭如何快速實現 MySQL 高可用集群部署,以及部署集群的校驗和卸載方式。本文將演示如何對集群進行備份和恢復。 部署版本為 RadonDB MySQL Kubernetes 2.1.3。 環境準備 首先準備一套 Kubernetes 集群,過程略。然 ...
  • 前言 上篇文章《Android安卓進階技術分享之AGP工作原理》和大家分析了 AGP(Android Gradle Plugin) 做了哪些事,瞭解到 AGP 就是為打包這個過程服務的。 那麼,本篇文章就和大家聊一聊其中的 Transform,解決一下為什麼在 AGP 3.x.x 的版本可以通過反射 ...
  • Hello HarmonyOS進階系列(應用篇),聚焦HarmonyOS應用開發,連志安、唐佐林、徐禮文、李寧、李洋、夏德旺、潘凌越等7位技術大咖將傾情分享如何基於HarmonyOS系統成功開發應用,在智能家居、智慧辦公、智慧出行、運動健康、影音娛樂等領域賦能開發者。 ...
  • 4 月 25 日,“共建新技術,開拓新領域”OpenAtom OpenHarmony(以下簡稱“OpenHarmony”)技術日在深圳順利召開。 ...
  • 超級終端中,設備的能力和狀態如何管理?設備之間如何進行信息協同?要回答這些問題,就不得不提我們本期的主角——DeviceProfile。 ...
  • HMS Core地圖服務(Map Kit)給開發者提供一套地圖開發調用的SDK,助力全球開發者實現個性化地圖呈現與交互,方便輕鬆地在應用中集成地圖相關的功能,全方位提升用戶體驗。 在日常工作中,我們會收到很多開發者們留言集成地圖服務中遇到的問題,這裡我們將典型問題進行分享和總結,希望為其他遇到類似問 ...
  • 由於javascript是單線程的執行模型,因此為了提高效率就有了非同步編程,單線程在程式執行時,所走的程式路徑按照連續順序排下來,前面的必須處理好,後面的才會執行。 但是我們也需要類似多線程機制的這種執行方式,我們需要非同步執行編程,非同步執行編程會使得多個任務併發執行。 非同步編程可以實現多任務併發執行 ...
  • 本篇文章主要寫了Vue過渡和動畫基礎、多個元素過渡和多個組件過渡,以及列表過渡的動畫效果展示。詳細案例分析、GIF動圖演示、附源碼地址獲取。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...