最近使用 next 构建一个项目，使用 mobx 来管理数据，并且做持久化。这里记录下遇到的问题 持久化使用的插件为mobx-persist-store首先是 storage 配置项，由于 nextjs 首先进行服务端渲染，所以并没有 window 对象，故配置的 localStorage 获取不到，当然这里在服务端页不需要获取，故我们可以通过typeof 来判断 window 是否存在，如果存在，则进行持久化操作，否则不进行持久化操作。核心代码为： 123456typeof window !== "undefined" && makePersistable(yourstore, { name: "yourStoreName", properties: ["yourProperties"], storage: localStorage, //or other storage }); 看起来不错，代码将会只在客户端运行，并作持久化操作，但是运行起来却发现，next 报错 ...

js引擎 js并非是完全一门解释型语言，v8引擎也会对代码进行编译操作来优化代码。我们可以通过理解这些优化方式来编写更加高效的代码 下面是几个例子： inline caching 内联缓存 hidden classes 隐藏类 奇怪的题1234567var heyhey = function doodle(){ doodle() //这里可以访问到 return 'heyhey'}heyhey()doodle() // ReferenceError: doodle is not defined 函数作用域与块作用域在块作用域中，var定义的变量可以在外部访问到，但是在函数作用域中，var定义的变量只能在函数内部访问到。 而let和const定义的变量，只能在定义的块内部访问到。 IIFE立即执行表达式 123(function(){ console.log('hello')})() 或者 123(function(){ console.log('hello&# ...

vuex对于typescript的兼容性一直有问题，尤其是使用useStore时，如果使用typescript给store了类型，那么在使用useStore时，只会显示根store的state的属性，对于modules的state属性，无法显示出来，而且使用时还会报错，导致只能将state设置为any，也没有了typescript的提示。 这里给出一种解决方法，就是重写一下useStore方法，使用typescript的类型，这样就可以显示出来modules的state属性了，并且不会报错。 12345678910111213export interface IRootState { name: string}//将IRootWithModule继承IRootState，并且将modules设置为IRootWithModule的属性，这样无论是根store还是modules，都可以访问到state属性了export interface IRootWithModule extends IRootState { loginModule: ILoginSta ...

需求在使用vuex时，经常会遇到需要数据持久化的需求，比如用户的token、用户的个人信息等，这些数据在登录成功后，需要持久化到本地，以便下次登录时使用。 实现vuex Plugin这里使用vuex的插件作为实现, 实现的内容有： 当store初始化时，获取本地存储的数据，并设置到store中 每次store提交mutation时，将store中指定的数据持久化到本地 用到的第三方库 shvl：获取和设置对象内的点标记属性 deepmerge：深度合并两个或多个对象的可枚举属性。 具体实现如下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192import { Store } from 'vuex'import * as shvl from ...

一. 代码规范来自coderwhy老师 1.1. 集成editorconfig配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 123456789101112131415# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_of_line = lf # 控制换行类型(lf | cr | crlf)trim_trailing_whitespace = true # 去除行首的任意空白字符insert_final_newline = true # 始终在文件末尾插入一个新行[*.md] # 表示仅 md 文件适用以下规则max_line_length = offtrim_trailing_whitespace = false VSCode需要安装一个插件：EditorConfig for ...

JavaScript 中 ?? 与 || 的区别用法相同，都是前后是值，中间用符号连接。根据前面的值来判断最终返回前面的值还是后面的值。 值 1 ?? 值 2 值 1 || 值 2 不同点判断方式不同： 使用 ?? 时，只有当值 1 为 null 或 undefined 时才返回值 2； 使用 || 时，值 1 会转换为布尔值判断，为 true 返回值 1，false 返回值 2 123456789101112131415// ??undefined ?? 2; // 2null ?? 2; // 20 ?? 2; // 0"" ?? 2; // ""true ?? 2; // truefalse ?? 2; // false// ||undefined || 2; // 2null || 2; // 20 || 2; // 2"" || 2; // 2true || 2; // truefalse || 2; // 2

在之前学习 typescript 的时候看过 never 这个类型，并没有具体了解其使用场景，今天深入了解了下，发现官网给的例子非常好，这里来具体讲一下 首先定义这么一个函数： 12345678910function handleMessage(message: string | number) { switch (typeof message) { case "string": console.log("string 处理方式处理 message"); break; case "number": console.log("number 处理方式处理 message"); break; }} 可以看到该函数接收 message，其类型为 string 或者 number 假设未来某一天有人把 message 类型增加了 boolean,由于 switch 语句中没有对其做判断，所以传入该类型该函数是不会有任 ...

string 和 String|number 和 Number 的区别string:Typescript 中的字符串类型String:Javascript 中的字符串包装类的类型其他同理

这里先贴下上一篇文章 书接上回，在实现 vuex hooks 的第一版中，未考虑到分模块的问题，这里更新下 useMapGetters 和 useMapState 两个函数，这次两个函数做的工作为格式化用户输入，对于没有传 moduleName，也就是没有命名空间的 mapper,直接使用 vuex 中的 mapState|mapGetters，对于传入 moduleName 的，则使用createNamespacedHelpers获取到 moduleName 这个命名空间的辅助函数。 他可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数 useMapGetters12345678910111213import { createNamespacedHelpers, mapGetters, useStore } from "vuex";import { computed } from "vue";im ...