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

这篇具有很好参考价值的文章主要介绍了造轮子系列】面试官问:你能手写Vuex吗(一)?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全文章来源地址https://www.toymoban.com/news/detail-434916.html

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 { getters = {} } = options;
    
    this.getters = {};
    for (const [key, value] of Object.entries(getters)) {
      Object.defineProperty(this.getters, key, {
        get: () => value(this.state),
      });
    }
  }
}
复制代码

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后端面试题库大全

到了这里,关于造轮子系列】面试官问:你能手写Vuex吗(一)?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手写 Vuex4 源码

    本文首发于掘金,未经许可禁止转载 Vuex4 是 Vue 的状态管理工具,Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存储是响应式的 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地 提交 (commit) mutation 。 本文手写部分分为八个部分,基本包含了 Vue

    2024年02月14日
    浏览(48)
  • 【面试】面试官问的几率较大的网络安全面试题

    攻击者在HTTP请求中注入恶意的SQL代码,服务器使用参数构建数据库SQL命令时,恶意SQL被一起构造,并在数据库中执行。 用户登录,输入用户名 lianggzone,密码 ‘ or ‘1’=’1 ,如果此时使用参数构造的方式,就会出现 select * from user where name = ‘lianggzone’ and password = ‘’ or

    2024年02月01日
    浏览(52)
  • 昨晚做梦面试官问我三色标记算法

    本文已收录至GitHub,推荐阅读 👉 Java随想录 微信公众号:Java随想录 原创不易,注重版权。转载请注明原作者和原文链接 目录 三色标记算法 增量更新 原始快照 某天,爪哇星球上,一个普通的房间,正在举行一场秘密的面试: 面试官:我们先从JVM基础开始问,了解三色标记

    2024年02月11日
    浏览(41)
  • 面试官问:kafka为什么如此之快?

    天下武功,唯快不破。同样的,kafka在消息队列领域,也是非常快的,这里的块指的是kafka在单位时间搬运的数据量大小,也就是吞吐量,下图是搬运网上的一个性能测试结果,在同步发送场景下,单机Kafka的吞吐量高达17.3w/s,不愧是高吞吐量消息中间件的行业老大。 那究竟

    2024年02月07日
    浏览(45)
  • 【CSS】面试官问我视差滚动怎么实现?我懵了...

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料可以找我免

    2024年02月05日
    浏览(50)
  • 面试官问 : ArrayList 不是线程安全的,为什么 ?(看完这篇,以后反问面试官)

    金三银四 ? 也许,但是。 近日,又收到金三银四一线作战小队成员反馈的战况 : 我不管你从哪里看的面经,但是我不允许你看到我这篇文章之后,还不清楚这个面试问题。 本篇内容预告:   ArrayList 是线程不安全的, 为什么 ? ① 结合代码去探一探所谓的不安全  ② 我们

    2024年02月02日
    浏览(60)
  • 字节的面试,你能扛住几道?

    C ++, Python 哪一个更快? 读者答:这个我不知道从哪方面说,就是 C + + 的话,它其实能够提供开发者非常多的权限,就是说它能涉及到一些操作系统级别的一些操作,速度应该挺快。然后 Python 实现功能还是蛮快的。 补充: 一般而言,C++更快一些,因为它是一种编译型语言

    2023年04月21日
    浏览(47)
  • 面试官问我:线程锁导致的kafka客户端超时,如何解决?

    本文分享自华为云社区《线程锁导致的kafka客户端超时问题》,作者: 张俭 。 有一个环境的kafka client发送数据有部分超时,拓扑图也非常简单 我们先对客户端的环境及JVM情况进行了排查,从JVM所在的虚拟机到kafka server的网络正常,垃圾回收(GC)时间也在预期范围内,没有

    2024年02月03日
    浏览(47)
  • 【137期】面试官问:RocketMQ 与 Kafka 对比,谈谈两者的差异?(1)

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新Java开发全套学习资料》,

    2024年04月27日
    浏览(33)
  • Bug小能手系列(python)_14: pd.concat得到的矩阵错误

    今天在运行 pd.concat (pd指的是 pandas 库),需要将两个DataFrame数据(数据分别为 5*4 的矩阵)进行列合并时,突然发现得到的矩阵是 10*8 的,而不是我想要的 5*8 的!!!虽然是个小问题,但是感觉网上给出的内容一直没把这个问题介绍清楚,这里就专门写一篇文章帮助大家理解

    2024年01月17日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包