在 Vue 中手寫乙個微型 Vuex

2021-10-07 19:27:38 字數 722 閱讀 8172

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式,在vue專案中,有些資料需要在很多元件內進行傳遞,為了方便管理和維護,我們就需要這樣乙個工具來管理這些資料,通常情況下我們就會選擇vuex。

但是正如vuex官網所說:

vuex 可以幫助我們管理共享狀態,並附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。如果您不打算開發大型單頁應用,使用 vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單,您最好不要使用 vuex。

但是當我需要這樣乙個工具又不想變得冗餘繁瑣怎麼辦呢,這時我們可以使用vue(v2.6+)中提供的 vue.observable api手寫乙個微型的vuex。

建立 store

import vue from 'vue'

// 使用 vue.observable 建立乙個響應物件

export const store = vue.observable(,

power:

})// 建立 mutations 來改變資料

export const mutations = ,

setpower(power)

}

在元件中使用
}

這樣我們就有了乙個微型的狀態管理工具,在上面基礎上加強也可以用來應對相對複雜的邏輯,另外也可以看一下vue官網所寫的store模式。

the end

感謝閱讀

在vue中手寫乙個文字的輪播功能

最近在中控專案中遇到乙個問題,就是需要輪播顯示資料,網上給的教程都是定高的,所以就自己寫了乙個,效果如下 對於這種輪播的功能,其實應該根據是否定高去分為兩種情況用不同的方案去處理。一 不定高輪播 我在看了很多部落格之後發現他們給的方案都是定高的,這種你可能一搜一大把,我就只分享別人沒有說過或者不容易...

手寫乙個彈窗元件 vue

最近的專案中,需要自己去手寫乙個全域性的彈窗元件,在下面貼出自己的 元件寫的比較簡單 notice.vue 自定義元件的掛載 這裡用了兩種不同的形式,考慮到不同的元件需要特定的方法,比如notice元件只能是乙個單例的模式,所以用了乙個notice.js給他掛載,其他通用的元件可以採用第二種方式進行...

手寫乙個Vue的資料繫結

class myvue observer val 利用object.keys 來迴圈出下標 object.keys val foreach keys defineproperty obj,key,value set newvalue document.queryselector text inner...