vuex 中的核心概念及原理

GeekQiaQia發表於2019-04-09
Vue

vuex 底層原理：

vuex 推薦map的方式代替原生操作：

vuex 中的核心概念及原理
VUE核心概念

  • state:提供一個響應式資料；

  • Getter:藉助Vue的計算屬性computed來實現快取；

  • Mutation；更改state方法；

  • Action:觸發mutation 方法；

  • Module:Vue.set 動態新增state 到響應式資料中；

    1. vuex 中核心原理：通過vue 例項，將state資料賦值給data(){return { $$state:state}}
    2. commit 實際上就是執行mutations 中的某個方法；
    3. 每次訪問State的時候，實際上是訪問了重寫的get 方法；訪問例項中的資料屬性；
    4. ....

精簡核心程式碼如下,當下僅實現commit：

import Vue from 'vue'

const Store =function Store(options={}){
const {state={},mutations={}}=options;
this._vm=new Vue({
	data:{
	$$state:state
	}
});

this._mutations=mutations;
}

Store.prototype.commit=function(type,payload){
// 如果mutations[type]這個方法存在；則執行這個方法；		
if(this._mutations[type]){
	this._mutations[type](this.state,payload);
	}
}

// 向原型上定義屬性；
Object.defineProperties(Store.prototype,{
state:{
	get:function(){
		return this._vm._data.$$state;
	}
}
});	

export default {Store}
複製程式碼

**問題：**這裡為什麼使用this._vm._data 來獲取vue 例項中的響應式資料；

相關文章