min-vuex.js文件
import Vue from 'vue'
//默认参数
function Store(option = {}) {
//解构赋值
var {
state = {}, mutations = {}
} = option;
//通过Vue将state设置为响应式数据
this._vm = new Vue({
data() {
return {
$$state: state
}
}
});
this._mutations = mutations;
}
//getter
Object.defineProperty(Store.prototype, "state", {
get() {
return this._vm._data.$$state;
}
})
//Store原型下添加commit方法,通过commit调用mutations中的方法
Store.prototype.commit = function(methodName, payload) {
if (this._mutations[methodName]) {
this._mutations[methodName](this.state, payload);
}
}
//增强的对象文本
export default {
Store
}
总结:
- State:提供一个响应式数据。
- Getter:借助Vue的computed来实现缓存。
- Mutation:更改state的方法。
- Action:触发Mutation的方法。
- Module:Vue.set动态添加state到响应式数据中。