MINI-VUEX

回顾一下 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')

---

分析

1. Vuex 下有 install 方法用于 Vue.use 注册插件，
2. Vuex 下有 Store 类接收初始化配置

实现初始化

// 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

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

实现 mutations

mutatiions 用与操作 state， 通过 this.$store.commit( type, payload ) 触发

class Store {
  constructor(options) {
    this.mutations = options.mutations;
  }
  commit = ( type, payload ) => {
    this.mutations[type](this.state, payload)
  }
}

实现 actions

action 内通过参数解构出 { commit, state }