vuex原理筆記

2022-05-01 09:30:11 字數 1038 閱讀 5712

本文總結自:  將要點提煉為筆記,以便不時之需,安不忘危。

核心可分為兩部分: 

1.vue.use(vuex)

本質上執行vuex的install方法,引數為vue

vue賦給區域性物件

vue生命週期裡新增vuexinit

層層巢狀新增$store

2.建立store例項

前提是必須呼叫過vue.use(vuex),必須支援promise

初始化基本屬性(比如committing,用來監測是否非法修改state;比如_modulesnamespacemap,用來儲存命名空間)

初始化modulecollection,引數為option物件,來建立module物件樹

原型dispatch方法、commit方法封裝,使其第乙個引數為state

其中commit內通過_withcommit來修改狀態,這是唯一的合法方法

嚴格模式設定

installmodule(),模組安裝,初始化元件樹的根模組

其中installmodule()主要完成:

如果有命名空間,將模組新增進store._modulesnamespacemap這個陣列裡

如果不是根元件且非hot,將其state設定到父級state的modulename屬性上

makelocalcontext()上下文環境設定,根據命名空間為模組設定區域性dispatch、commit、getter和state

註冊對應模組的mutation、action、getter

遞迴地為子module呼叫installmodule

resetvm,store的初始化

植入devtoolplugin並提供"時空穿梭功能"

state內部如何支援模組配置與模組巢狀的?

store物件構造過程中會呼叫makelocalcontext(建立本地上下文),每乙個module都有乙個上下文環境,與配置時的路徑匹配,因此dispatch('a', b)等時,預設拿到的是local state,如果需要服務外層或其他module的state,只能根據rootstate沿路徑逐步訪問。

簡述vuex實現原理

vuex實現原理實際上是通過vue的例項化來實現 這裡通過計數器來說明 首先例項化兩個vue物件,通過他測試是否能統一管理狀態 root和 root2 new vue new vue 接下就是例項化乙個vue物件來統一管理狀態 function registerplugin vue myvuex.v...

Vuex原理解讀

註冊vuex vue.usee vuex 建立store例項並匯出 export default newvuex.store getters mutations actions modules import store from store newvue mount vuex有乙個store建構函式...

Vuex的核心原理

import vue from vue import vuex from vuex vue.use vuex let stroe newvuex.store getter mutations actions export default stroe 在main.js中 import vue from...