目錄
三、刻畫vuex 的大致結構
四、完成 install 方法
五、完成 store 中的 state
六、完成 store 中的 getters
七、完成 store 中的 mutations
八、完成 store 中的 commit
九、完成 store 中的 actions
//store/index.js
import vuex from "vuex"
import vue from "vue"
vue.use(vuex)
const store = new vuex.store(
getters:
},mutations: ,
},actions: ,payload)
}})export default store
import store from "./store"
new vue()
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
解析:上文中的vue.use(vuex)會自動呼叫vuex這個物件的install方法, 並在install中傳入 vue 例項，來保證內外的vue例項一致。你可以把vue.use方法理解為:vue.use = ( object ) =>
思考：故我們重構的 vuex 需要對外暴露乙個install方法
const store = new vuex.store(,
getters: ,
mutations: ,
actions:
})
解析:從new vuex.store()可以看出匯入的vuex包含著乙個名為store的建構函式。
思考：綜合以上兩點，我們可以推斷出在 vuex 檔案的匯出內容大致為:
export default ,
store: ()=>
}
const store = new vuex.store(,payload)
}state:,
mutations: ,
getters:
}
解析:這種是官方推薦的結構寫法,你也可以這麼寫
addcount(context,payload)解析:第二種寫法種的引數context是指上下文環境即這個store例項。上文中的第一種寫法，既然可以從這個context中解構出commit方法，不難得出這個store例項包含commit方法
class store )
}function install(vue)
export default
思考:在使用官方的vuex後, 我們在每個元件中都可以訪問到this.$store, 可是我們在main.js中只是把store掛載到根例項中，按理說只有在根例項中才可以訪問到store
import store from "./store"
new vue()
結論:要在根例項中把store賦值給$store,並且利用vue元件載入的先父後子原則，從根例項的子元件開始，每個元件都從父元件拿到$store,並將從父元件拿到的$store賦值給自己的$store屬性，從而實現每個元件都擁有$store屬性，並且都指向同乙個store例項
let vue
let install = (_vue) => else}})
}export default install
思考:store 中 state 的響應式是利用vue中data的響應式來實現的
import install from './intsall.js'
class store )
})}}
export default
getters:
},
class store )
})}
/***** getters code ****/
this.getters = {}
for(let gettername in getters)
return getter[gettername](this.vm.state)}})
}}
mutations: ,
},
class store )
})}
/***** mutations code ****/
this.mutations = {}
object.keys(mutations).foreach( mutationname =>
})}
addcount(,payload)class store )
})}
/***** commit code ****/
this.commit = (mutationname,newvalue)=>
}
actions:
}
class store )
})}
/***** actions code ****/
this.actions = {}
object.keys(actions).foreach(actionname =>
})}
vuex簡單原始碼實現
let vue 在變數宣告 不然會儲存 class store vue.store 對應使用結構 export default install用於use外掛程式 this getters 初始化物件 用於獲取store裡面的getters屬性 this mutations option.mutati...
vuex原始碼實現
let vue 自定義foreach迴圈 author suzhe datetime 2019 07 28t11 12 17 0800 param obj description param classback description const foreach obj,classback 格式化模...
vuex 原始碼分析 vuex原始碼解讀 簡易實現
原始碼解讀 開始之前，先貼個大綱 首先，我們從使用方法入手，一步步來看 store.js import vue from vue import vuex from vuex vue.use vuex export default new vuex.store data 2000 main.js im...