实现vuex源码，手写

getaxiosluo2024-10-26 9:17

实现vuex源码，手写

Vuex 是专门为 Vue.js 应用程序开发的状态管理模式 + 库，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

第一步：定义初始化Store类

创建文件夹store/vuex.js

1.定义 Store 类：

  • 创建一个名为 Store 的类，它接受一个 options 对象作为参数。
  • 在 options 对象中，包含 state（应用的状态）、mutations（同步更改状态的方法）、actions（异步操作或包含任意异步操作的方法）、以及 getters（从 state 中派生出一些状态的方法）。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
   
  }
}

2.初始化 Vue 实例：

  • 在 Store 类的构造函数中，使用 new Vue({ data: { $$state: options.state } }) 创建一个 Vue 实例，用于响应式地存储状态。这里使用 $$state 作为属性的名称是为了避免与 Vue 实例自身的 state 属性冲突，但这不是必须的，只是一个命名约定。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
     this._vm = new Vue({
       data:{
         $$state:options.state
       }
     })
  }
}

3.存储 mutations 和 actions：

  • 将 options.mutations 和 options.actions 分别存储在 this._mutations 和 this._actions 中。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
     this._vm = new Vue({
       data:{
         $$state:options.state
       }
     })
     this._mutations = options.mutations
     this._actions = options.actions
  }
}

4.绑定 commit 和 dispatch 方法：

  • 使用 Function.prototype.bind 方法将 commit 和 dispatch 方法绑定到 Store 实例上，以确保在回调函数中 this 指向正确。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
     this._vm = new Vue({
       data:{
         $$state:options.state
       }
     })
     this._mutations = options.mutations
     this._actions = options.actions
     this.commit = this.commit.bind(this)
     this.dispatch = this.dispatch.bind(this)
  }
}

5.初始化 getters：

  • 创建一个空对象 this.getters 用于存储 getter 方法。
  • 如果 options.getters 存在，则调用 this.handleGetters(options.getters) 方法来初始化 getters。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
     this._vm = new Vue({
       data:{
         $$state:options.state
       }
     })
     this._mutations = options.mutations
     this._actions = options.actions
     this.commit = this.commit.bind(this)
     this.dispatch = this.dispatch.bind(this)
     this.getters = {}
     options.getters && this.hanleGetters(options.getters)
  }
}

第二步：实现 handleGetters 方法和其他 Store 方法

1.实现 handleGetters 方法：

  • 在 handleGetters 方法中，遍历 getters 对象的键。
  • 使用 Object.defineProperty 在 this.getters 对象上定义每个 getter 属性，其 get 方法返回 getters[key](this.state) 的结果。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
     this._vm = new Vue({
       data:{
         $$state:options.state
       }
     })
     this._mutations = options.mutations
     this._actions = options.actions
     this.commit = this.commit.bind(this)
     this.dispatch = this.dispatch.bind(this)
     this.getters = {}
     options.getters && this.hanleGetters(options.getters)
  }
  handleGetters(getters){
    Object.key(getters).map((key)=>{
      Object.defineProperty(this.getters,key,
        get: () => getters[key](this.state)
      })
    })
  }
}

2.实现 state 的 getter 和 setter：

  • 使用 get state() 方法来访问 Vue 实例中存储的状态。
  • 使用 set state(v) 方法来防止直接修改状态（虽然在这里，setter 只是打印了一个错误消息）。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
     this._vm = new Vue({
       data:{
         $$state:options.state
       }
     })
     this._mutations = options.mutations
     this._actions = options.actions
     this.commit = this.commit.bind(this)
     this.dispatch = this.dispatch.bind(this)
     this.getters = {}
     options.getters && this.hanleGetters(options.getters)
  }
  handleGetters(getters){
    Object.key(getters).map((key)=>{
      Object.defineProperty(this.getters,key,
        get: () => getters[key](this.state)
      })
    })
  }
  //get set
  get state(){
    return this._vm.data.$$state
  }
  set state(v) {
    console.error("please provide");
  }
}

3.实现 commit 方法：

  • commit 方法用于触发 mutations，它接受一个 type（mutation 的类型）和一个可选的 payload（传递给 mutation 的数据）。
  • 根据 type 从 this._mutations 中找到对应的 mutation 方法，并调用它，传入 this.state 和 payload。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
     this._vm = new Vue({
       data:{
         $$state:options.state
       }
     })
     this._mutations = options.mutations
     this._actions = options.actions
     this.commit = this.commit.bind(this)
     this.dispatch = this.dispatch.bind(this)
     this.getters = {}
     options.getters && this.hanleGetters(options.getters)
  }
  handleGetters(getters){
    Object.key(getters).map((key)=>{
      Object.defineProperty(this.getters,key,
        get: () => getters[key](this.state)
      })
    })
  }
  //get set
  get state(){
    return this._vm.data.$$state
  }
  set state(v) {
    console.error("please provide");
  }
  //commit
  commit(type,value){
   const entry = this._mutations[type]
   if(!entry){
   console.error("please provide");
   }
   entry(this.state,value)
  }
}

4.实现 dispatch 方法:

  • dispatch 方法用于触发 actions，它的工作原理与 commit 类似，但通常用于处理异步操作。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
     this._vm = new Vue({
       data:{
         $$state:options.state
       }
     })
     this._mutations = options.mutations
     this._actions = options.actions
     this.commit = this.commit.bind(this)
     this.dispatch = this.dispatch.bind(this)
     this.getters = {}
     options.getters && this.hanleGetters(options.getters)
  }
  handleGetters(getters){
    Object.key(getters).map((key)=>{
      Object.defineProperty(this.getters,key,
        get: () => getters[key](this.state)
      })
    })
  }
  //get set
  get state(){
    return this._vm.data.$$state
  }
  set state(v) {
    console.error("unknown mutation type");
  }
  //commit
  commit(type,value){
   const entry = this._mutations[type]
   if(!entry){
   console.error("please provide");
   }
   entry(this.state,value)
  }
  //dispatch
  dispatch(type,value){
    const entry = this._actions[type]
    if(!entry){
       console.error("unknown action type")
    }
    entry(this.state,value)
  }
}

第三步：安装现在自定义vuex插件，需要一个install方法

  • 创建一个名为 install 的函数，它接受一个 Vue 构造函数作为参数。
  • 在 install 函数中，将 Vue 构造函数存储在全局变量 Vue 中。
  • 使用 Vue.mixin 方法来全局注册一个 beforeCreate 钩子，该钩子会在每个 Vue 组件实例创建之前被调用。
  • 在 beforeCreate 钩子中，检查 this.$options.store 是否存在，如果存在，则将其赋值给 Vue.prototype.$store，这样在任何 Vue 组件中都可以通过 this.$store 访问到 store 实例。
javascript 复制代码 
let Vue;
class Store{
 constructor(options) {
     this._vm = new Vue({
       data:{
         $$state:options.state
       }
     })
     this._mutations = options.mutations
     this._actions = options.actions
     this.commit = this.commit.bind(this)
     this.dispatch = this.dispatch.bind(this)
     this.getters = {}
     options.getters && this.hanleGetters(options.getters)
  }
  handleGetters(getters){
    Object.key(getters).map((key)=>{
      Object.defineProperty(this.getters,key,
        get: () => getters[key](this.state)
      })
    })
  }
  //get set
  get state(){
    return this._vm.data.$$state
  }
  set state(v) {
    console.error("unknown mutation type");
  }
  //commit
  commit(type,value){
   const entry = this._mutations[type]
   if(!entry){
   console.error("please provide");
   }
   entry(this.state,value)
  }
  //dispatch
  dispatch(type,value){
    const entry = this._actions[type]
    if(!entry){
       console.error("unknown action type")
    }
    entry(this.state,value)
  }
}

Store.install = (_vue)=>{
  Vue = _vue
  Vue.mixin({
     beforeCreate(){
       if(this.$options.store){
         Vue.prototype.$store = this.$options.$store
       }
     }
  })
}

第四步：导出install，Store

javascript 复制代码 
let Vue;
class Store {
  constructor(options) {
    this._vm = new Vue({
      data: {
        $$state: options.state,
      },
    });
    this._mutations = options.mutations;
    this._actions = options.actions;
    this.commit = this.commit.bind(this);
    this.dispatch = this.dispatch.bind(this);
    this.getters = {};
    options.getters && this.handleGetters(options.getters);
  }
  handleGetters(getters) {
    console.log(Object.keys(getters))
    Object.keys(getters).map((key) => {
      Object.defineProperty(this.getters, key, {
        get: () => getters[key](this.state)
      });
    });
  }
  get state() {
    return this._vm._data.$$state;
  }
  set state(v) {
    console.error("please provide");
  }
  commit(type, payload) {
    console.log(type, payload)
    const entry = this._mutations[type];
    if (!entry) {
      console.error("unknown mutation type: " + type);
    }
    entry(this.state, payload);
  }

  dispatch(type, payload) {
    console.log(this._actions[type]);
    const entry = this._actions[type];
    if (!entry) {
      console.error("unknown mutation type: " + type);
    }
    entry(this.state, payload);
  }
}
const install = (_Vue) => {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        Vue.prototype.$store = this.$options.store;
      }
    },
  });
};
export default {
  Store,
  install,
};

第五步：创建store/index.js

javascript 复制代码 
import Vue from 'vue'
// 引入自己的写的vuex,里面有一个对象{install}，当你use时，会自动调用这个方法
import Vuex from './vuex.js'
Vue.use(Vuex)
//需要创建一个仓库并导出
//当new的时候,给Vuex.js中传入了一堆的东西
export default new Vuex.Store({
    state: {
        name: 1
    },
    //getters中虽然是一个方法，但是用时，可以把他当作属性
    getters: {   // 说白了，就是vue中data中的computed
        powerCount(state) {
            return state.name * 2
        },
    },
    // 改变状态：异步请求数据  事件 
    mutations: {
        add(state) {
            state.name++
        }
    },
    actions: {
        add(state) {
            setTimeout(() => {
                console.log(state)
                state.name = 30
            }, 1000);
        }
    }
})

第六步：在main中挂载store

javascript 复制代码 
/* eslint-disable vue/multi-word-component-names */
import Vue from 'vue'
import App from './App.vue'
import store from "./store.js"
Vue.config.productionTip = false

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

第七步：如何使用store

和vuex一样的用法，语法一样

javascript 复制代码 
<template>
  <div>
    {{ $store.state.name }}
    {{ $store.getters.powerCount }}
    <button @click="add">123</button>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
    }
  },
  methods:{
    add(){
      this.$store.commit('add')
      // this.$store.dispatch('add')
      console.log(this.$store.getters.powerCount)
      this.$store.handleGetters.powerCount
    }
  },
  mounted() { 
    console.log(this.$store.state.name)
   }
}
</script>
   {{ $store.state.name }}
    {{ $store.getters.powerCount }}
    <button @click="add">123</button>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
    }
  },
  methods:{
    add(){
      this.$store.commit('add')
      // this.$store.dispatch('add')
      console.log(this.$store.getters.powerCount)
      this.$store.handleGetters.powerCount
    }
  },
  mounted() { 
    console.log(this.$store.state.name)
   }
}
</script>
相关推荐
燃先生._.1 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
2401_857600954 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_857600954 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL4 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
轻口味4 小时前
Vue.js 核心概念：模板、指令、数据绑定
vue.js
2402_857583494 小时前
基于 SSM 框架的 Vue 电脑测评系统：照亮电脑品质之路
前端·javascript·vue.js
java_heartLake5 小时前
Vue3之性能优化
javascript·vue.js·性能优化
ddd君317746 小时前
组件的声明、创建、渲染
vue.js
前端没钱7 小时前
从 Vue 迈向 React：平滑过渡与关键注意点全解析
前端·vue.js·react.js
顽疲7 小时前
springboot vue 会员收银系统 含源码 开发流程
vue.js·spring boot·后端
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程