总结
我在成长过程中也是一路摸爬滚打,没有任何人的指点,所以走的很艰难。例如在大三的时候,如果有个学长可以阶段性的指点一二,如果有已经工作的师兄可以告诉我工作上需要什么,我应该前面的三年可以缩短一半;后来去面试bat,失败了有5、6次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Pinia 还提供了一个完整的插件系统,具有交易和本地存储同步等功能,适用于 Pinia 默认行为不足的情况。
TypeScript 支持
Pinia 提供比 Vuex 更好的 TypeScript 支持,具有 Javascript 自动完成功能,这使得开发过程变得简单。
Pinia 轻量的
Pinia 的重量只有 1 KB,因此很容易融入您的项目。这可能会提高您的应用程序性能。
Vuex的特点
模块
当您的应用程序扩展时,遍历变得很困难。但是,使用 Vuex 模块,您可以根据领域功能将您的商店拆分为多个文件,并从该特定命名空间中的模块访问状态循环。
开发工具支持
Vue devtools 中的 Vuex 选项卡允许我们查看状态并跟踪我们的变化。这使我们能够快速评估我们的程序如何执行和调试错误。
热重载
Vuex支持热重载功能,它使用 webpack 的热模块替换 API,可以在您开发时快速重载您的 mutations、modules、action 和 getters。
TypeScript 支持
如果你想编写一个 TypeScript 存储定义,Vuex 可以提供它的类型并且更容易实现。它有一个默认的 TypeScript 配置,不需要额外的设置。
Pinia和Vuex的代码对比
Pinia 是一个轻量级库,可帮助您管理整个应用程序的反应状态。与 Vuex 相比,Pinia API 易于学习,使您的代码更易于阅读。
让我们看一下使用 Pinia 和 Vuex 管理我们的状态的代码比较:
Vuex
在此示例中,我们将查看一个简单的 Vuex 存储,它跟踪待办事项列表项的状态:
import { createStore } from 'vuex'
const TodoListstore = createStore({
state() {
return {
todoListItems: []
}
},
actions: {
addNewList({ commit }, item) {
{
commit('createNewItem', item)
}
},
mutations: {
createNewItem(state, item) {
state.todoListItems.push(item)
}
}
})
如果你看上面的代码,你可以看到 Vuex 存储中的三个动作:状态、 动作和突变。状态返回当前的todoListItems,动作提交一个突变来创建一个新项目,最后,突变创建新项目并将其添加到列表中。当你构建一个更大的应用程序时,你可能会意识到动作和突变相对相似,导致冗余代码,因为每个状态变化都需要一个样板。
Pinia
使用 Pinia 简单 API,您可以消除突变和冗余代码。让我们查看一个代码示例,了解当您使用 Pinia 实现之前的代码时的样子:
import { defineStore } from 'pinia'
Export const useListStore = defineStore('list', {
state() => ({
return {
todoListItems: []
}
}),
actions: {
addNewList() {
this.todoListItems.push(item)
}
}})
上面的示例是 Pinia API 在管理应用程序状态时如何工作的简单代码。使用 Pinia,我们删除了突变并将其直接更新到我们的动作中。
注意:在上面的代码示例中,当我们将项目直接提交给我们的操作时,我们不需要跟踪我们的项目。
Pinia 和 Vuex 的优缺点
Pinia 和 Vuex 是控制应用程序状态的优秀工具,但其中一个必须具有另一个所没有的某些功能。让我们来看看它们是什么。
Pinia 的优点
- Pinia 允许你在不重新加载页面的情况下修改你的商店。
- 它在 JavaScript 中提供 TypeScript 支持和良好的自动完成功能。
- Pinia 提供 devtool 支持,这有助于增强开发人员使用该工具的体验。
- Pinia 只有状态、吸气剂和动作。不需要突变。
- 使用 Pinia,你可以将状态存储在一个地方,并在请求时将其传递给它们的组件。
- 它是一个重量为 1 KB 的轻量级库。
- 它提供服务器端渲染支持和自动类型模块,无需额外工作。
- Pinia 兼容 Vue 2 和 Vue 3。
Pinia 的缺点
- 与 Vuex 相比,它没有庞大的社区支持和解决方案。
- Pinia 不支持调试功能,如时间旅行和编辑。
Vuex 的优点
- Vuex 有 mutations、getters 和 actions。
- 与 Pinia 相比,Vuex 的社区支持很大。
- Vuex 支持调试功能,如时间旅行和编辑。
Vuex 的缺点
- 它对 TypeScript 不友好。
- 你只能将其用于大型 SPA。
我应该使用哪个:Pinia 还是 Vuex?
好吧,这就是它变得更具挑战性的地方,因为仍然有一些项目需要使用 Vuex 来处理状态应用程序,即使 Pinia 是新推荐的状态管理库。它有几个 Vuex 没有的有价值的功能。
Vuex 仍然是构建大型 SPA 的理想解决方案,因为对于构建中小型应用程序的人来说,它相当冗长。
Pinia 也一样。尽管如此,如果你需要所有列出的功能,例如 devtool 支持、TypeScript 支持和状态应用程序的轻松管理,那么 Pinia 是最好的解决方案——它为你提供流畅的开发体验。
如果你正在构建一个不太复杂的应用程序,无论是中等到广泛的应用程序,你都可以使用 Pinia,因为它的重量约为 1 KB。
结论
由于功能多样,在管理应用程序状态时,在 Vuex 和 Pinia 之间进行选择可能会造成混淆。不过,这两个框架都非常适合管理状态应用程序。本文简要比较了它们的特性、功能和对代码的影响。读完这篇文章后,也许你将能够找到适合你的库。
⭐️ 好书推荐
《Vue.js 快速入门实战》
【内容简介】
Vue.js 快速入门实战以Vue.js的知识点为基础,结合TypeScript的使用,循序渐进地介绍了Vue.js 3.0(简称Vue3)的知识点和实战技巧,可以帮助零基础的读者掌握独立开发项目和部署项目上线的技术。全书共14章,包括Vue.js概述、搭建开发环境、Vue.js组合式API、Vue.js的模板语法、Vue.js的计算属性和侦听器、Vue.js中class和style的绑定、Vue.js的表单开发、Vue.js的组件开发、Vue.js的网络请求、Vue.js的状态管理、Vue.js的路由管理、Vue的项目部署、在线招聘网站开发实战以及招聘网站后台管理系统开发实战。
总结
-
框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。
-
算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!
生活要慎重选择!!!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!