vuex?設(shè)計思路和實現(xiàn)方式
vuex 設(shè)計思路和實現(xiàn)
API概念的東西就不介紹了, 如果還不了解vuex 的應(yīng)用, 可以去查看官方vuex文檔 。
下面著重講解 vuex的原理以及實現(xiàn)
vuex 設(shè)計思路
vuex是使用插件機制開發(fā)的, vuex 中的 store 本質(zhì)就是沒有template的隱藏著的vue實例
在beforeCreate 混入vuexInit ,vuexInit方法實現(xiàn)了store注入vue組件實例,并注冊了vuex store的引用屬性·$store

vuex 設(shè)計思路源碼
// vuex插件公開的install方法
function install (_Vue) {
if (Vue && _Vue === Vue) {
{
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
);
}
return
}
Vue = _Vue;
applyMixin(Vue);
}
/* ... */
var index_cjs = {
Store: Store,
install: install, // 開放出去install方法, 直接在項目中使用這個插件
version: '3.4.0',
mapState: mapState,
mapMutations: mapMutations,
mapGetters: mapGetters,
mapActions: mapActions,
createNamespacedHelpers: createNamespacedHelpers
};
return index_cjs;
// 混入到項目中
function applyMixin (Vue) {
var version = Number(Vue.version.split('.')[0]);
if (version >= 2) {
Vue.mixin({ beforeCreate: vuexInit }); // 在生命周期beforeCreate創(chuàng)建全局混入函數(shù)
} else {
// 覆蓋初始化并注入vuex初始化過程
// 1.x 以上版本兼容。
var _init = Vue.prototype._init;
Vue.prototype._init = function (options) {
if ( options === void 0 ) options = {};
options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit;
_init.call(this, options);
};
}
function vuexInit () { // Vuex 初始化鉤子,注入到每個實例初始化鉤子列表中
var options = this.$options;
// store injection
if (options.store) {
this.$store = typeof options.store === 'function'
? options.store()
: options.store;
} else if (options.parent && options.parent.$store) {
this.$store = options.parent.$store;
}
}
}
// 使用Vue實例來存儲狀態(tài)樹
// 隱藏警告,以防用戶添加了, 一些優(yōu)先的 global mixins
function resetStoreVM (store, state, hot) {
/* other... */
var silent = Vue.config.silent;
Vue.config.silent = true;
store._vm = new Vue({ // 創(chuàng)建一個vue 實例
data: {
$$state: state
},
computed: computed
});
Vue.config.silent = silent;
/* other... */
}
vue 響應(yīng)式設(shè)計,依賴監(jiān)聽、依賴收集
想深刻理解 vuex 的設(shè)計思路。
要明白 vue 對象數(shù)據(jù) Object.defineProperty ,getter/setter 方法的代理劫持的原理
// src/core/instance/state.js
// 初始化組件的state
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
// 當(dāng)組件存在data屬性
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
// 當(dāng)組件存在 computed屬性
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
vuex 就是實現(xiàn)了帶有計算屬性的 data 數(shù)據(jù), 原理和 initComputed、 initData 是一致的
如果上面已經(jīng)完全理解,想更深度了解響應(yīng)式依賴 繼續(xù)閱讀vue的computed、vm.$data原理
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?實現(xiàn)網(wǎng)頁背景水印功能的示例代碼
這篇文章主要介紹了Vue3?實現(xiàn)網(wǎng)頁背景水印功能,這里水印的字體大小、顏色和排布參考了企業(yè)微信的背景水印,使得看起來不那么突兀,需要的朋友可以參考下2022-08-08
Vue通過Blob對象實現(xiàn)導(dǎo)出Excel功能示例代碼
這篇文章主要介紹了Vue通過Blob對象實現(xiàn)導(dǎo)出Excel功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽
本文主要介紹了vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-07-07
vue el-table 動態(tài)添加行與刪除行的實現(xiàn)
這篇文章主要介紹了vue el-table 動態(tài)添加行與刪除行的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07
如何利用VUE監(jiān)聽網(wǎng)頁關(guān)閉并執(zhí)行退出操作
這篇文章主要給大家介紹了關(guān)于如何利用VUE監(jiān)聽網(wǎng)頁關(guān)閉并執(zhí)行退出操作的相關(guān)資料,因為項目中需求,瀏覽器關(guān)閉時進(jìn)行一些操作處理,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue el-form-item如何添加icon和tooltip
這篇文章主要介紹了vue el-form-item如何添加icon和tooltip問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10

