VUE3 自定義 輕量級全域資料共享方案之一 Provide&inject （簡單快速實作vuex功能）

在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 = https://www.cnblogs.com/Allen-project/archive/2022/11/24/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本身提供的獨立回應式系統來實作的，

 

 

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538249.html

標籤：其他

上一篇：VUE3 全域共享資料方案之一 global state （簡單快速實作類似vuex）

下一篇：前端JavaScript初學者提升前端技能必須要練習的15個專案推薦，趕快收藏！！！