自定義 封裝單列模式！ global state

1.創建一個js ，diy-vuex.js 名字自己定義 我為了模擬共享資料 和vuex相似所以叫這個

2.第二步封裝 我們的共享資料模塊 

diy-vuex.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)
        })
    }
}


import { reactive,readonly } from 'vue'
// 創建默認的全域單列回應式資料，僅供改模塊內部使用
const state = reactive({user:null,loading:false});

// 對外保留的資料只能讀取，不能修改
// 也可以進一步使用toRefs進行封裝，從而避免解構或展開后回應式丟失
export const loginUserStore = readonly(state);

// 登錄
export async function login (loginId,loginPwd){
    state.loading = true
    const user = await userSery.login(loginId,loginPwd);
    state.user = user;
    state.loading = false
}

// 退出
export async function loginOut (){
    state.loading = true
    await userSery.loginOut();
    state.user = null;
    state.loading = false
}

// 恢復登錄狀態
export 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
}

3.頁面呼叫我們的封裝模塊

因為js檔案只會加載一次，并且在去讀取是有快取的，

<template>
    diyVuex<br/>
    
    <div>
        <span >{{loginUserStore.loading?'加載中...':''}}</span>
        <p style="cursor: pointer;" v-if="!loginUserStore.user" @click="loginEvent"><span>去登錄</span></p>
        <p style="cursor: pointer;" v-else-if="loginUserStore.user" @click="loginOutEvent"><span>退出登錄</span></p>
        <div v-if="loginUserStore.user">
            <span>用戶：{{loginUserStore.user.name}}</span><br/>
            <span>年齡：{{loginUserStore.user.age}}</span>
        </div>
    </div>
</template>

<script setup>
    import { login,loginUserStore,loginOut ,whoAmI} from '../store/diy-vuex.js'
    const router = useRouter();
    // 點擊 登錄
    const loginEvent = ()=>{
        login('allen',18)
    };
    // 退出登錄
    const loginOutEvent = ()=>{
        loginOut()
    };
    // 恢復登錄
    whoAmI();
    
</script>

<style scoped>
</style>

點擊登錄 頁面最后這樣

 注意：當我們登錄成功了 保存了資料 跳轉到其他頁面的時候 其他頁面需要讀取和修改的時候 ，一樣的引入這個模塊就可以使用了，并且資料是隨時更新的，實作了類似vuex的全域回應式共享資料，

也就是說上一個頁面修改了 這個模塊的state資料，其他任何地方展示或讀取到的就是最后一次修改的state資料，

最后優化建議：以上只是一個最基本的結構是這樣的，當我們在中大型專案中 全部資料內容和函式寫一個檔案肯定不行的 建議模塊化匯入，像vuex一樣 一個index.js 其他分模塊合并在 一個index.js中

標籤：其他

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

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