50+Vue经典面试题源码级详解(40)

·  阅读 3359
50+Vue经典面试题源码级详解(40)

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第17天,点击查看活动详情

前言

小伙伴们好,这是村长《Vue经典面试题源码级详解》系列文章第 40 题,前面已完成题目合集在此: 历时一个月,2.6W字!50+Vue经典面试题源码级详解,你值得收藏!

学习群

我组织了一个面试学习群,关注村长公众号村长学前端,回复“加群”,大家一起卷~

相关学习资源

本系列有配套视频思维导图开源项目,大家学习同时千万不要忘了三连 + 关注 + 分享,有道是喝水不忘挖井人~

如果让你从零开始写一个vuex,说说你的思路

思路分析

这个题目很有难度,首先思考vuex解决的问题:存储用户全局状态并提供管理状态API。

  • vuex需求分析
  • 如何实现这些需求

回答范例

  1. 官方说vuex是一个状态管理模式和库,并确保这些状态以可预期的方式变更。可见要实现一个vuex

    • 要实现一个Store存储全局状态
    • 要提供修改状态所需API:commit(type, payload), dispatch(type, payload)
  2. 实现Store时,可以定义Store类,构造函数接收选项options,设置属性state对外暴露状态,提供commit和dispatch修改属性state。这里需要设置state为响应式对象,同时将Store定义为一个Vue插件。

  3. commit(type, payload)方法中可以获取用户传入mutations并执行它,这样可以按用户提供的方法修改状态。 dispatch(type, payload)类似,但需要注意它可能是异步的,需要返回一个Promise给用户以处理异步结果。


实践

Store的实现:

class Store {
    constructor(options) {
        this.state = reactive(options.state)
        this.options = options
    }
    commit(type, payload) {
        this.options.mutations[type].call(this, this.state, payload)
    }
}
复制代码

知其所以然

Vuex中Store的实现:

github1s.com/vuejs/vuex/…

写在最后

时间比较仓促,如有考虑不周,欢迎小伙伴们在评论区补充。

原创不易,给作者点个赞鼓励一下吧~

分类:
前端
收藏成功!
已添加到「」, 点击更改