VUE3 自定義 輕量級全局數據共用方案之一 Provide&inject (簡單快速實現vuex功能)

来源:https://www.cnblogs.com/Allen-project/archive/2022/11/24/16920770.html
-Advertisement-
Play Games

在vue2中,提供了provide和inject配置,可以讓開發者在高層組件中註入數據,然後在後代組件中使用 除了相容vue2的配置式註入,vue3在composition api 中添加了provide和inject方法,可以在setup函數中註入 和使用數據 基本使用 provide('key' ...


在vue2中,提供了provide和inject配置,可以讓開發者在高層組件中註入數據,然後在後代組件中使用 除了相容vue2的配置式註入,vue3在composition api 中添加了provide和inject方法,可以在setup函數中註入 和使用數據   基本使用 provide('key',value)
// app.vue 定義數據
<script setup>
import { provide,ref } from 'vue'
const sum = ref(1)
provide('foo',sum) 

</script>
// 其他頁面調用
<script setup>
import { inject } from 'vue'
let foo = inject('foo')//傳入key 在其他任意頁面都能獲取到
console.log(foo.value)// 1

</script>
  考慮到有些數據需要在整個vue應用中使用,vue還在應用實列中加入了provide方法,用於提供整個應用的共用數據
creaetApp(App).provide('fpp',ref(1)).provide('foo',ref(2)).mount('#app')
因此,我們可以利用這一點,在整個vue應用中提供共用數據 目錄結構:

模塊封裝

userSever.js
// 模擬ajax api介面使用
const userSery = {
    // 登錄介面
    login: (name,age) =>{
        // 介面返回用戶數據 儲存在本地
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                let user = {
                    name :name,
                    age:age
                }
                window.sessionStorage.setItem('user',JSON.stringify(user))
                console.log('登錄成功')
                resolve(user)
            },1000)
        })
    },
    // 退出登錄
    loginOut:()=>{
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                window.sessionStorage.removeItem('user')
                resolve('退出成功')
            },1000)
        })
    },
    // 恢復登錄
    whoAmI:()=>{
        // 讀取本地儲存的用戶數據 
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                let  user = window.sessionStorage.getItem('user');
                if(user){
                    
                    user = JSON.parse(user);
                    console.log('恢覆成功',user)
                    resolve(user);
                } else {
                    reject('恢復失敗');
                };
            },1000)
        })
    }
}



// store  提供當前登錄用戶的共用數據
import { readonly,reactive,inject } from 'vue';
const key = Symbol();

// 在傳入的vue應用實列中提供數據
export function provideStore(app){
    //  創建預設的響應式數據
    const state = reactive({user:null,loading:false});
    // 登錄
    async function login (loginId,loginPwd){
        state.loading = true
        const user = await userSery.login(loginId,loginPwd);
        state.user = user;
        state.loading = false
    }
    // 退出
    async function loginOut (){
        state.loading = true
        await userSery.loginOut();
        state.user = null;
        state.loading = false
    }
    
    // 恢復登錄狀態
    async function whoAmI (){
        state.loading = true
        try {
            const user = await userSery.whoAmI();
            state.user = user;
            state.loading = false
        } catch (e) {
            state.user = null;
        }
        state.loading = false
    }
    app.provide(key,{
        state:readonly(state), // 對外只讀
        login,
        loginOut,
        whoAmI
    })
}


export function useStore(defaultValue = null){
    return inject(key,defaultValue)
}
View Code 封裝註入模塊給app src/store/index.js
import { provideStore as provideLoginUserStore } from "./userSever.js"

// 繼續導入其他共用數據模塊...
// import {provideStore as provideNewsStore } from './sueNew.js'

// 提供統一的數據註入介面
export default function provideStore (app){
provideLoginUserStore(app);
// 繼續註入其他共用數據
// provideNewsStore
}
main.js導入並且註入app
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import provideStore from './store'
const app = createApp(App).use(router);
provideStore(app) // 提供所有共用數據
app.mount('#app')

// createApp(App).use(store).use(router).mount('#app')
到這裡就已經完成了 全部準備工作 在你想調用的地方和頁面進行下麵引入和使用
import { useStore} from '../store/userSever.js'
const Store  =  useStore()
console.log(Store.state); //定義的state響應式數據
// 下麵調用 導入模塊的指定的函數方法去修改 state共用的響應式數據內容
// 點擊 登錄
const loginEvent = ()=>{
Store.login('allen',18)
};
// 退出登錄
const loginOutEvent = ()=>{
Store.loginOut()
};
// 恢復登錄
Store.whoAmI()

 

共用響應式數據,在A頁面使用到了state,在B頁面去調用函數改變 state 那麼A頁面的state數據也會發送改變,只要使用到的 state的地方都會響應式改變數據,相比vuex 更加輕量級 更加具有自定義擴展的能力,因為他本身不依賴任何第三方插件,完全是靠 vue本身提供的獨立響應式系統來實現的。

 

 


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

-Advertisement-
Play Games
更多相關文章
  • 一、MySQL簡介 ​ MySQL是一種關係型資料庫管理系統,關係資料庫將數據保存在不同的表中,而不是將所有數據放在一個大倉庫內,這樣就增加了速度並提高了靈活性。 二、安裝與下載 1、下載流程 1、訪問官方(www.mysql.com) 2、點擊‘DOWNLOADS’,進入下載界面 3、下拉,找到‘ ...
  • 關於 uniapp 獲取已安裝應用列表 uniapp 中返回的數據問題 獲取所有安裝的app 判斷是否是系統應用 獲取詳細app信息 遇到的問題 參考文檔 uniapp 中返回的數據問題 在uniapp中有時候放回的數據是 一個對象裡面(如下麵所示這種)根本不知大怎麼處理,查閱資料也沒相關資料,只能 ...
  • Android開發之線程間通信 當我們的軟體啟動的時候,電腦會分配進程給到我們運行的程式,在進程中包含多個線程用於提高軟體運行速度。 在android網路請求中,我們知道在日常開發中不能在子線程中跟新ui,否則報錯Only the original thread that created a vi ...
  • 現如今, AR技術不斷發展,人們不再滿足於運用鍵盤、滑鼠等簡單器械來實現傳統的人機交互模式。隨著用戶接觸機器的多樣化,繁瑣的操作不但對一些用戶有門檻,而且還增加其學習成本;如果能用自然且符合日常生活習慣的人機交互模式,不僅更好上手,也能讓開發者們在應用內開發更多玩法。比如在視頻直播或者拍照過程中,一 ...
  • 對象中可以直接寫變數 ES6 允許在大括弧裡面,直接寫入變數和函數,作為對象的屬性和方法。 const foo = 'bar'; const obj = {foo}; //key值就是foo,value值是 foo變數對應的值 // 輸出的是 {foo: "bar"} console.log(obj ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 現在 uniapp 開發的實時音視頻聊天類的 APP 大部分都要在 nvue 頁面上進行開發。雖然 nvue 與 vue 的區別不是很大,但還是有所差異的。 仔細查看了 uniapp 官網,發現了可以使用原生子窗體進行開發,可以把整個視頻 ...
  • 要成為一名優秀的 Web 開發人員,最快的方法就是練習。一個很好的練習方法是儘可能多地構建初學者項目。那是因為每個項目都會提出一個獨特的問題和解決方案,因此您解決的項目越多,您獲得的知識就越多。將您完成的每個項目都視為您獲得的獎牌。您擁有的獎牌越多,您就越能準備好應對下一個難度更大的項目。 為了幫助 ...
  • 個人名片: 對人間的熱愛與歌頌,可抵歲月冗長:sun_with_face: Github👨🏻‍💻:念舒_C.ying CSDN主頁✏️:念舒_C.ying 個人博客:earth_asia: :念舒_C.ying 預覽圖 直接進入我的網站吧 >> Z_C戀愛日記 下載源碼 鏈接:https:// ...
一周排行
    -Advertisement-
    Play Games
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 1、環境搭建 1.1 依賴 <!-- nacos註冊中心 註解 @EnableDiscoveryClient --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba- ...
  • ULID:Universally Unique Lexicographically Sortable Identifier(通用唯一詞典分類標識符) UUID:Universally Unique Identifier(通用唯一標識符) 為什麼不選擇UUID UUID 目前有 5 個版本: 版本1: ...
  • 虛基類/抽象類 抽象類:有純虛函數的類 虛繼承 通過修飾繼承方式, 如代碼2是虛繼承,被虛繼承的類稱為虛基類 虛繼承派生類的記憶體佈局方式 先是vbptr => 派生類的數據 =>基類的數據 , 對比代碼1和代碼2,發現原本基類數據在前面,派生類數據在後面,但是在虛繼承的時候 基類數據方式放到了後面, ...
  • 下麵給出 Kafka 一些重要概念,讓大家對 Kafka 有個整體的認識和感知,後面還會詳細的解析每一個概念的作用以及更深入的原理 • Producer:消息生產者,向 Kafka Broker 發消息的客戶端。 • Consumer:消息消費者,從 Kafka Broker 取消息的客戶端。 • ...
  • 前面介紹了對稱加密演算法,本文將介紹密碼學中另一類重要應用:消息摘要(Digest),什麼是消息摘要?簡單的定義是:對一份數據,進行一個單向的Hash函數,生成一個固定長度的Hash值,這個值就是這份數據的摘要,也稱為指紋。 ...
  • 弟弟最近要考試,臨時抱佛腳在網上找了一堆學習資料複習,這不剛就來找我了,說PDF上有水印,影響閱讀效果,到時候考不好就怪資料不行,氣的我差點當場想把他揍一頓! 算了,弟弟長大了,看在打不過他的份上,就不打他了~ 稍加思索,我想起了Python不是可以去水印?說搞就搞! 去除水印原理 去除方法: 用 ...
  • 作者:陳昌浩 1 導讀 if…else…在代碼中經常使用,聽說可以通過Java 8的Function介面來消滅if…else…!Function介面是什麼?如果通過Function介面介面消滅if…else…呢?讓我們一起來探索一下吧。 2 Function介面 Function介面就是一個有且僅有 ...