Vue全家桶之Vuex

一.使用

1.引入

import Vuex from "vuex";
Vue.use(Vuex);

2.创建实例

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

3.在根组件添加

new Vue({
  render: (h) => h(App),
  store,
}).$mount("#app");

二.Vuex简易学习

let Vue;
class Store {
  constructor(options) {
    this.$options = options;
    this.state = new Vue({
        data(){
            return options.state
        }
    });
  }
  commit(type,payload) {
    this.$options.mutations[type](this.state,payload);
  }
}
const Vuex = {
  Store,
  install(_Vue) {
    Vue = _Vue;
    Vue.mixin({
      beforeCreate() {
        if (this.$options.store) {
          Vue.prototype.$store = this.$options.store;
        }
      },
    });
  },
};
export default Vuex;