造轮子系列】面试官问：你能手写Vuex吗(一)？

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全

Vuex 是 Vue.js 的状态管理模式，它主要解决了组件之间共享状态时的问题。在本文中，我们将实现一个简单的状态管理器，来帮助我们更好地理解 Vuex 的实现原理。

使用 vue.use 启用 vuex 插件

vue.use 是 vue 提供的安装插件 API。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

即需要导出 install 方法，同时导出一个类 Store ，于是可以写出以下代码：

let Vue = null
​
class Store {
  constructor(options) {}
}
​
function install(_Vue) {
  Vue = _Vue
}
​
export default {
  Store,
  install,
}
复制代码

实现 install 方法

Store

在 Vuex 中，Store 是一个对象，它是一个容器，用于存储和管理状态( state )，包含了以下几个主要部分：

• state：存储状态的数据，也就是全局要共享的数据。
• getters：包含一些函数，用于对 state 进行计算操作。
• mutations：包含一些函数，用于改变 state 的值。
• actions：包含一些函数，用于处理异步操作或者一些逻辑处理。

state

首先，我们需要定义一个存储对象，用于保存应用程序的所有状态。我们可以创建一个名为 Store 的类，并在其中定义一个状态对象。我们还可以将 state 对象定义为响应式的，以便在状态更改时通知 Vue 更新视图。这可以通过使用 Vue.observable 方法来实现

class Store {
  constructor(options) {
    const { state = {} } = options;
    // 使用 observable 响应化处理
    this.state = Vue.observable(state);
  }
}
复制代码

getter

接下来，我们需要实现 getters，以便从状态中派生计算属性。我们将 getters 添加到 Store 类中：

class Store {
  constructor(options) {
    const { mutations = {} } = options;
    this.mutations = mutations;
    commit(type, payload) {
      if (!this.mutations[type]) {
        throw new Error(`Mutation "${type}" not found`);
      }
      this.mutations[type](this.state, payload);
    }
  }
}
复制代码

commit

最后，我们需要实现 mutations 和 actions，以便更改状态和处理异步操作。mutations 是唯一可以更改状态的方法，而 actions 则是处理异步操作的地方，它们可以触发 mutations 来更改状态。我们将 mutations 和 actions 添加到 Store 类中：

在下面的代码中，我们添加了一个 commit 方法，它接受一个类型和有效载荷参数，并调用与类型匹配的 mutation 函数来更改状态。

class Store {
  constructor(options) {
    const { mutations = {} } = options;
    this.mutations = mutations;
    commit(type, payload) {
      if (!this.mutations[type]) {
        throw new Error(`Mutation "${type}" not found`);
      }
      this.mutations[type](this.state, payload);
    }
  }
}
复制代码

dispatch

还需要添加了一个 dispatch 方法，它接受一个类型和有效载荷参数，并调用与类型匹配的 action 函数。注意，我们将 commit 和 state 作为参数传递给 action 函数，以便在需要更改状态时使用。

class Store {
  constructor(options) {
    const { actions = {} } = options;
    this.actions = actions;
    dispatch(type, payload) {
      if (!this.actions[type]) {
        throw new Error(`Action "${type}" not found`);
      }
      return this.actions[type]({ commit: this.commit, state: this.state }, payload);
    }
  }
}
复制代码

这个简单的状态管理器只是 Vuex 的一部分实现，但它帮助我们更好地理解了 Vuex 的概念和实现原理。你会发现还没有实现 map辅助函数、模块化以及严格模式等，后续将一步步完善，对比与 vuex4、pinia 的差异化等。希望这篇文章对你有所帮助！

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全