詳解幾十行代碼實現一個vue的狀態管理

// index.js
import {Center, install} from './center'
export default {Center, install}

// center.js
let Vue // 全局變量, 保存install里的Vue
export function install (_Vue) {
 if (!Vue) {
 _Vue.mixin({
 beforeCreate: applyMixin // 在beforeCreate鉤子上混入applyMixin函數
 })
 }
 Vue = _Vue
}

export default new Vuec.Center({
 state: {
 name: 'liuyang'
 },
 mutations: {
 changeName (state) {
 state.name = 'jike'
 }
 }
})

// center.js
export 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
 }
 })
}

this.mutations = {
 changeName (state) {
 state.name = 'jike'
 }
}

 function observeState(center, state) { // 響應式state
 center._vm = new Vue({ // 利用Vue的響應系統,將state轉化成響應式
 data: {
 $$state: state
 }
 })
 }

// center.js
export class Center {
 ...省略
 get state () { // 代理了this.$center.state的最終訪問值
 return this._vm.$data.$$state
 }
 ...省略
}

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}
})

// mixins.js
export 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
}

// center.js
export class Center {
 ... 省略
 commit (_type, _payload) {
 this.mutations[_type](this.state, _payload)
 }
}

// this.mutations[_type] , _type = 'changeName', payload= 'jike'
this.mutations = {
 changeName (state, payload) {
 state.name = payload
 }
}