使用vue3 CompositionAPI手撸vuex，更好的理解vuex的工作原理

需要到的api

 

provide 顶层组件提供数据

inject   任意子组件获取数据

reactive 将state变成响应式数据

 

1. 从vue3中倒入API： inject，reactive

import {inject, reactive} from 'vue'

2. 声明一个store的key

const STORE_KEY = '__store__'

3. 子组件通过调用函数useStore获取顶层组件提供的数据

function useStore(){
    return inject(STORE_KEY)
}

4. 用户通过调用createStore函数初始化store对象

function createStore(options){
   return new Store(options)
}

5. Store对象的实现

class Store {
  constructor(options){
　　// 存储state，通过reactive把state变成响应式数据
    this._state = reactive({
       data: options.state()
   })
   // 存储mutations
   this._mutations = options.mutations
 }

 // 返回state对象, 这里使用get语法 方便访问this.state时直接返回data
 get state(){
　　return this._state.data
 }
 
 // commit 用户提交mutations时，先判断是否有这个mutations函数
 // 有才调用，并传入state和新数据提供给用户使用

 commit = (type, payload) => {
   const entry = this._mutations[type]
   entry && entry(this.state, payload)
 }

 // install方法，提供给Vue.use进行全局注册
 // 全局注册组件时，调用全局组件的provide
 // provide函数接收一个key，一个value
 // 这里把STORE_KEY作为key，把this作为value也就是Store对象
 install(app){
   app.provide(STORE_KEY, this)
 }
}
// 最后倒出createStore，和useStore
export {createStore, useStore}