一、使用

//src/store/index
import {createStore} from 'vue'
const store = createStore({
  state: {
    age: 1,
  },
   getters: {
    getAgeaa(state, getters) {
      console.log("getter不会缓存");
      return state.age + 5;
    },
  },
  actions: {
    //
    age_action({ commit },playload) {
      setTimeout(() => {
        console.log("修改");
        commit("add_age",playload);
      }, 2000);
    },
  },
  mutations: {
    add_age(state, playload ) {
      state.age += playload.count;
    },
  }, 
});
export default store
//main.js 引入插件
import store from './store'
createApp({}).use(store)

//App.vue
<script setup>
    import useStore from 'vue'
  age
 <script>   
//v2的使用方式
<h1>$store.state.age</h1>
<h2>

二、实现

// util/index
//工具函数：后面遍历getters mutation,actions
export default function foreach(obj,cb){
    // 执行cb 传入对象的key,value
    Object.keys(obj).foreach((item)=>{
        cb(item,obj[item])
    })
}

import {reactive,inject} from 'vue'
let defaultKey='store'
class MyVuex {
    constructor(options){
        //处理state
        this.state=reative(options.state)
        //处理getter
        let getters=options.getters
        this.getters={}
        foreach(getters,(key,value)=>{
            //value是getters函数
            Object.defineProperty(this.getters,key,{
             //必须是箭头函数 this才是 MyVuex   
                get:()=>{
                  return  value(this.state)
                }
            })
        })
        //处理mutations -- 配合commit调用
         let mutations=options.mutations
        this.mutations={}
        foreach(mutations,(key,value)=>{
          mutations[key]=(data)=>{
              value(this.state,data)
          }
        })
        //处理actions -- 配合dispatch调用
          let actions=options.actions
        this.actions={}
        foreach(actions,(key,value)=>{
          actions[key]=(data)=>{
              value(this,data)
          }
        })
    }
    install(app,key){
        //1.挂载到全局上
        //兼容v2
        app.config.globalProperties=this
        //vue3
        app.provide(key||defaultKey)
    }
    commit=(name,data)=>{
        //箭头函数 this永远指向MyVueX
        this.mutations[name](data)
    }
    dispatch=(name,data)=>{
        //箭头函数 this永远指向MyVueX
         this.actions[name](data)
    }
}
export function createStore(options){
    return new MyVueX(options)
}
export function useStore(key) {
   return  inject(key||defaultKey)
}

三、总结

• vuex需要use引入，需要实现install
• install做的事
  • 将vuex挂载到全局app（vue实例上)
• 实现createStore useSotre 工厂单例模式
• 处理state 使用reactive 变为响应式
• 处理 getters 需要在get就执行函数
• 处理mutations 实现commit （使用箭头函数）
• 处理actions 实现dispatch(使用箭头函数)