简易vuex源码实现

Posted 2022-06-17 haishen

kvuex.js  文件    （实现vuex插件）

// 1、维护状态state
// 2、修改状态commit
// 3、业务逻辑控制dispatch
// 4、状态派发getter
// 5、实现state响应式
// 6、插件
// 7、混入

let Vue

function install(_Vue, storeName = ‘$store‘) 
    Vue = _Vue

    // 混入：把store选项指定到Vue原型上
    Vue.mixin(
        beforeCreate() 
            // 判断main.js的当期组件选择中，是否有sotre   
            if(this.$options.store)
                Vue.prototype[storeName] = this.$options.store 
            
        
    )


class Store 
    // options:  state: count:0, mutations:count(state) 
    constructor(options = )
        // 利用vue数据响应式
        this.state = new Vue(
            data: options.state
        )

        // 初始化mutations
        this.mutations = options.mutations || 
        this.actions = options.actions || 
        options.getters && this.handleGetters(options.getters)
    

    // 触发mutations，需要实现commit
    commit = (type, arg) => 
        // this只想Store实例
        const fn = this.mutations[type] // 获取状态变更函数
        fn(this.state, arg)
     

    dispatch = (type, arg) => 
        const fn = this.actions[type]
        return fn(commit: this.commit, state: this.state, arg)
    

    // getters: score(state)return state.xx
    handleGetters(getters)
        this.getters =  // store实例上的getters

        // 定义只读的属性
        Object.keys(getters).forEach(key => 
            Object.defineProperty(this.getters, key, 
                get: () => 
                    return getters[key](this.state)
                
            )
        )
    


export default Store, install

 

kindex.js  文件  相当于store.js文件

import Vue from ‘vue‘
import KVuex from ‘../kvuex‘

Vue.use(KVuex)

export default new KVuex.Store(
    state: 
        count: 0
    ,
    mutations: 
        add(state, num = 1) 
            state.count += num
        
    ,
    getters:  // 相当于计算属性
        score(state) 
            return ‘score：‘ + state.count
        
    ,
    actions: 
        // 处理复杂业务逻辑，类似于controller
        // 比如ajax请求

        asyncAdd( commit )  // 参数解构，拿到上下文
            setTimeout(() => 
                commit(‘add‘)
            , 1000);
        

    
)

 

测试文件---vue文件

<template>
    <div>
        <h3>vuex test</h3>
        <p>$store.state.count</p>
        <p>$store.getters.score</p>
        <button @click="add">add</button>
        <button @click="asyncAdd">asyncAdd</button>
    </div>
</template>

<script>
export default 
    methods: 
        add() 
            this.$store.commit(‘add‘, 2)
        ,
        asyncAdd()
            this.$store.dispatch(‘asyncAdd‘)
        
    ,

</script>