介紹
采用集中式存儲管理應用的所有組件的狀態, 就能實現組件間數據共享
實現
邏輯圖
從圖上有兩條線: Vue.use(vuec), 與 new Vuec.center(options)
第一條線Vue.use(vuec)安裝插件
使用Vue.use(vuec)時, 會執行vuec的install方法,會注入參數Vue 所以vuec是這樣的,
// index.jsimport {Center, install} from './center'export default {Center, install}Center對象將實例化成center(下面再說),我們先看看install方法
// center.jslet Vue // 全局變量, 保存install里的Vueexport function install (_Vue) { if (!Vue) { _Vue.mixin({ beforeCreate: applyMixin // 在beforeCreate鉤子上混入applyMixin函數 }) } Vue = _Vue}install在Vue原型的beforeCreate混入applyMixin函數, 也就是說在生成每個Vue組件時,在它的生命周期beforeCreate鉤子上就會執行applyMixin方法
第二條線 new Vuec.center(options)實例化Center對象
先看看用戶傳入的options, 下面例子
export default new Vuec.Center({ state: { name: 'liuyang' }, mutations: { changeName (state) { state.name = 'jike' } }})上面代碼會生成center實例, 該實例上應該包括:state狀態,commit方法提交變更等
// center.jsexport class Center { constructor (options= {}) { let center = this this.mutations = options.mutations observeState(center, options.state) } get state () { // 代理了this.$center.state的最終訪問值 return this._vm.$data.$$state } commit (_type, _payload) { this.mutations[_type](this.state, _payload) }}function observeState(center, state) { // 響應式state center._vm = new Vue({ data: { $$state: state } })}在執行new Vuec.Center({..})時,就是執行Center的構造函數
首先執行let center = this, 定義center保存當前實例
接著執行this.mutations = options.mutations, 在實例center上添加mutations屬性, 值就是用戶輸入mutations,
按上面例子, this.mutations長成這樣
this.mutations = { changeName (state) { state.name = 'jike' }}最后執行observeState(center, options.state), 作用:讓center實例的state屬性指向options.state并且是響應式的
function observeState(center, state) { // 響應式state center._vm = new Vue({ // 利用Vue的響應系統,將state轉化成響應式 data: { $$state: state } }) }在center實例上添加_vm屬性, 值是一個Vue實例, 在該Vue實例的data下定義了$$state, 它的值是options.state用戶輸入的state; 結合上面的這段代碼
// center.jsexport class Center { ...省略 get state () { // 代理了this.$center.state的最終訪問值 return this._vm.$data.$$state } ...省略}所以我們在組件中訪問center.state其實就是訪問center._vm.$data.$$state
OK, center就構建好了
創建Vue組件
用戶輸入
import Vue from 'vue'import App from './App'import router from './router'import center from './center'new Vue({ el: '#app', router, center, // 構建好的center實例 template: '<App/>', components: {App}})在beforeCreate生命周期時會觸發上面混入的applyMixin函數
// mixins.jsexport default function applyMixin() { vuecInit.call(this) // }function vuecInit () { const options = this.$options // vue的實例化是從外往內, 所以父組件的$center一定是options的center this.$center = options.parent?options.parent.$center: options.center}applyMixin里會執行vuecInit.call(this), 這里的this指向當前組件的實例,
接著看vuecInit, 定義了options等于用戶輸入選項,因為先創建根組件, 所以根組件this.$center的值的引用就是我們在new Vue({..center})時傳入的center實例, 下面所有組件都指向它
OK, 你就可以在組件里使用this.$center訪問了
commit變更
// center.jsexport class Center { ... 省略 commit (_type, _payload) { this.mutations[_type](this.state, _payload) }}通常我們變更時: this.$center.commit('changeName', 'jike'), 這樣的話, this.mutations[_type]就是對應方法函數, 往該函數里傳入state以及payload,
舉上面的例子
// this.mutations[_type] , _type = 'changeName', payload= 'jike'this.mutations = { changeName (state, payload) { state.name = payload }}說明
上面只是一個簡單的狀態管理, 還有很多地方沒有實現: actions異步變更,getters函數,modules模塊分割, 輔助函數mapState..等
源碼地址: github
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
