回顾一下 Vuex 的基础用法
// store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
getters: {},
actions: {},
mutations: {},
})
// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index';
new Vue({
store,
render: h => h(App)
}).$mount('#app')
分析
// min-vuex.js
let Vue;
class Store {
constructor(options) {
// init state
this.state = ?
}
}
function install(_Vue) {
Vue = _Vue;
// 使用 Vue.minix API 拿到 new Vue({ store }) 中的 store 实例
Vue.minix({
beforeCreate() {
const { store } = this.$options;
if(store) {
Vue.prototype.$store = store;
}
}
})
}
export default { Store, install };
state 是响应的,类似 Vue 的 data,数据改变视图也要更新,这里就 new Vue( data: store ) 实现响应式
import Vue from 'vue'
class Store {
constructor(options) {
const { state: data } = options; // => state: { count: 0, ... }
this.state = new Vue({ data });
}
}
mutatiions 用与操作 state, 通过 this.$store.commit( type, payload ) 触发
class Store {
constructor(options) {
this.mutations = options.mutations;
}
commit = ( type, payload ) => {
this.mutations[type](this.state, payload)
}
}
action 内通过参数解构出 { commit, state }