优秀的编程知识分享平台

网站首页 > 技术文章 正文

实现vuex(实现人生价值的根本途径是)

nanyue 2024-09-29 15:09:24 技术文章 135 ℃
let Vue 
class Store{
    constructor(options){
        this.state = new Vue({   // 强依赖   state 的变化 触发视图的变化
            data:options.state
        })
        this.mutations = options.mutations
        this.actions  = options.actions

        options.getters && this.handleGetters(options.getters)
    }
  // commit接受type和业务入参到mutations
    commit=(type,arg)=>{
        console.log(this)
        this.mutations[type](this.state,arg)
    }
  //发送dispatch到action
    dispatch(type,arg){
        this.actions[type]({
            commit:this.commit,
            state:this.state
        },arg)
    }
    handleGetters(getters){
        this.getters = {};
         // 遍历getters所有key
        Object.keys(getters).forEach(key=>{
            // 为this.getters定义若干属性,这些属性是只读的
            // $store.getters.score
            Object.defineProperty(this.getters,key,{  //每次获取this.getters 的所有属性时 都会触发get
                get:()=>{
                    return getters[key](this.state)
                }
            })
        })
    }
}


function install(_Vue){
    Vue = _Vue
    Vue.mixin({
        beforeCreate() {
            if(this.$options.store){
                Vue.prototype.$store = this.$options.store
            }
        },
    })
}
export default {Store,install}

使用:

import Vue from "vue";
import Vuex from "./kvuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state, n = 1) {
      state.count += n;
    }
  },
  getters: {
    score(state) {
      return `共扔出:${state.count}`
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit("increment", 2);
      }, 1000);
    }
  }
});

Tags:

最近发表
标签列表