鱼柠檬-CSDN博客

在vue项目中存储数据一般都会vuex,vuex有个问题一刷新数据就不见了，重置为默认值，那要解决这个办法怎么办？1. vuex 的优缺点优：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到缺：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。2.解决插件vuex-persistedstate原理:将vuex的state存在localStorage或sessionStorage或cookie中刷新页面的一瞬.

2022-04-18 11:31:47 1095

原创 antdv: DatePicker报错

[antdv: DatePicker] `value` provides invalidate moment time. If you want set empty value，use `null`老是遇到这个问题正常使用：html： <a-month-picker v-model="monthValue" :allowClear="false" type="month" placeholder="选择月"></a-month-picker>data:monthVal

2022-03-24 11:26:06 1842

原创【源码】mitt、tiny-emitter 之面试官问发布者订阅模式到底是要问什么呢？

1.学习目标什么是mitt、tiny-emitter什么是发布订阅设计模式2. 资料准备vue3事件总线tiny-emitter地址Mitt地址3.mitt它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，可以跨框架使用，React 、Vue、jQuery等，，而Vue3.x版本移除了内置的$on、$off的方法，改用使用第三方库进行该方法的调用，类似vue2的eventBus;3.1 初识-readme.md3.3.1 包的使用$ npm install

2021-11-24 18:10:16 716

原创【小知识】ts文件怎么转化为js文件？

先npm版本得在8.x.x没在这个版本的可以自定义升级，也可以升级到指定版本npm install -g npm@8.1.4下载ts npm i -g typescript检查版本 tsc -v找到你要转的ts文件，比如你的文件名叫index.ts进行文件转化执行命令： tsc src/index.ts，即可...

2021-11-22 11:42:23 2308

原创【源码】validate-npm-package-name 检测 npm 包是否符合标准

1.学习目标了解validate-npm-package-name它的作用和场景2.资料准备git clone https://github.com/npm/validate-npm-package-name.git3 初识–README.md3.1 什么是validate-npm-package-name？检测 npm 包的名称是否符合标准此包导出一个同步函数，该函数以字符串作为输入，并返回一个具有两个属性的对象：validForNewPackages :: Booleanv

2021-11-19 16:47:10 853

原创【源码】update-notifier 检测 npm 包是否更新～

学习目标了解update-notifier作用和使用场景应用场景：检测npm包是否更新，比如组件库更新或者其他npm 包更新，

2021-11-19 14:00:06 1482

原创【源码】koa-compose洋葱模型原理解析---函数多层调用怎么写更优雅？

资料准备【若川】koa 洋葱模型实现：https://juejin.cn/post/7005375860509245471【函数式编程指北】：https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch5.htmlhttps://www.yuque.com/docs/share/0268760e-60bf-4278-871e-c1e83a68be7a# 克隆git clone https://github.com

2021-11-01 17:02:09 309

原创【源码】co原理源码解读

学习目标了解 co 是什么学会调试promise 、generator、async await 三者区别和联系熟悉巩固 Promise、generator、async await 的用法熟悉 co 的实现原理准备工作代码地址:https://github.com/lxchuan12/koa-analysis,传送门克隆源码后，看package.json找到main,入口文件是lib/application.js了# 克隆仓库git clone https://github.com/

2021-10-21 14:43:43 979

原创第3期｜【源码】vue.js的发布流程——Vue3 Release.js源码解读

学习目标：1）学习 release.js 源码，输出记录文档。2) 熟悉发布流程准备工作：Vue3 源码地址：https://github.com/vuejs/vue-next 代码拉下来以后直接yarn【若川】Vue3 Release 源码解读：https://juejin.cn/post/6997943192851054606 链接确保 Node.js 版本是 10+, 而且 yarn 的版本是 1.x Yarn 1.x。从贡献指南 .github/contributin...

2021-09-12 10:25:54 464

原创第2期｜【源码】vue3工具函数源码解读

学习笔记源码解读第二期：知其然，知其所以然这个解读核心主要是shared模块，对应的文件路径是：vue-next/packages/shared/src/index.ts也可以用github1s访问，速度更快github1spackages/shared/src/index.ts打包构建按照贡献指南的方法打包，把ts 转成js打包前注意事项：Node.js 版本是 10+yarn 的版本是 1.x Yarn 1.x。node -v# v14.16.0# 全局安装

2021-08-31 18:32:36 355

原创【uuid】生成唯一id标识，让你看起来像大佬一样（3）

使用场景，表格的随机增加，需要不重复的id生成id 方法挺多：时间戳，随机数，uuid一般用uuid

2021-08-19 15:22:58 404

原创将数组连续的数据组成一个数组，最后组成一个大数组

项目中遇到的，记录一下：把连续的（间隔15分钟）放在一个数组，然后再所有连续的放在一个大数组例如 [[1:00-3:00] [5:00] [6:00 - 9:15]]核心思想：如果数组的后一项，比前一项大一，则是放到temp数组中, 否则，新建一个数组，且第一项为当前项后端返回的数据前端的处理 getSection(data) { let arr = []; let startArr = [data[0]]; for(let i = 1; i.

2021-08-17 11:07:46 311

原创第1期｜【源码】你不知道的vue-devtools！

这是一篇学习笔记????，大佬说了要知其然，知其所以然学习后可以知道：如何解决该功能报错问题如何调试学习源码launch-editor-middleware、launch-editor等实现原理关于 vue-devtools没看这个原理之前我只知道：在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展——VueDevtools。下载这个工具需要科学上网，去下载。下载好了以后凡是用vue构建的项目这个图标都会亮起来。其实vue-devtools

2021-08-12 11:19:59 1009

原创 vscode js 代码调试说明，让你看起来像大佬一样～（2）

这是一篇学习笔记????除了F12 浏览器调试代码/日常console.log/debugger，以外的vscode 调试代码的方法而且面试的时候本人曾被面试官问：你平时是怎么调试代码的？看，是不是又多了一种优雅调试代码的能力。Debugger for Chrome1.去vscode的扩展中心搜索Debugger for Chrome插件进行安装2.点击那个小虫子图标进入调试文件的配置点一下launch.json 就糊弹出如图二的框3.点击chrome 就会出现如下磨人的配

2021-08-09 10:14:21 228

原创【macBook】 vscode 用命令打开，让你看起来像大佬一样～（1）

来跟着我做：打开你的 vscode键盘上按 command + shift + p出来个搜索框：输入code没安装code 的安装一下，安装的就选择我上方截图种点击提示Shell Command: Install ‘code’ command in PATH运行然后cd 到目录（目录指的是你要运行的那个项目的目录）接着 code ./就行看网上还说了：或者直接使用 code filename 编辑文件...

2021-08-03 17:21:34 230

原创 git clone 出现 fatal: 无法访问 ‘https://github.com/lxchuan12/open-in-editor.git/‘：LibreSSL SSL_connect: SS

换电脑后第一次拉github 的代码出现如下报错：==fatal: 无法访问 ‘https://github.com/lxchuan12/open-in-editor.git/’：LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443 ==一下是解决这个问题的记录注意此处：SSL_ERROR_SYSCALL in connection to github.com:443打开度娘：好像是没登录github, 在.

2021-08-03 15:55:57 1125

原创 Hbuilderx调用小程序报错

11:40:34.392 [微信小程序开发者工具] × initialize11:40:34.393 [微信小程序开发者工具]11:40:34.410 [微信小程序开发者工具]11:40:34.423 [微信小程序开发者工具] ? Enable IDE Service (y/N) [27D[27C11:40:34.438 [微信小程序开发者工具] Runtime error11:40:34.438 [微信小程序开发者工具] Error: read EBADF11:40:34.452 [微信.

2021-05-11 13:36:35 517

原创 antd vue rangepicker mode=‘[month, month]‘ mode=‘year‘ 的时候 onchange不生效面板不关闭

简直是无语子，记录一下，年和月同理，因为懒就写了月，直接上代码，不想解释，累了<a-range-picker format="YYYY-MM" :mode="mode" :allowClear="false" v-model="rangeValue" :open="isRangeOpen" @openChange="openRangeChange" @panelChange="handlePanelChange2.

2021-04-23 16:20:03 2869 9

原创 antd vue的面包屑结合路由的实现记录

使用背景，公司大佬集成的的一个vue为基础的框架，在使用中大佬的按照常规来写的面包屑处理方式，与现实项目中需求有所出入，自己更改了一下，记录一下，防止以后遇到。Breadcrumb面包屑场景：html<a-breadcrumb :routes="breadcrumb" separator=">"> <template #itemRender="{route, routes, paths}"> <span v-if="routes.ind.

2021-04-22 11:19:36 3349 2

原创代码提交规范

代码提交规范大量的代码提交，必然会产生大量的 Commit log. 每一条都 Commit log 记录着某一阶段所完成的事以及关注点，应该尽可能详细具体；在工作中一份清晰规范的 Commit Message 能让后续代码审查、信息查找、版本回退都更加高效可靠提交格式<type>: <subject> 注意冒号后面有空格。type用于说明 commit 的类别，只允许使用下面 7 个标识。feat：新功能（feature）fix：修补 bugdocs：

2021-04-22 10:45:11 329

原创 Vuex mutation的常量的设计风格

先建一个文件夹，在文件夹的index.js 中将定义的mutation 收集起来，1.防止定义名字的时候重复，2.收集起来清晰一目了然在store.js中先引入，在使用，如图页面中使用，先引用在使用

2020-12-31 15:49:38 272

原创 Vuex getters 共享状态的计算属性

state中存的数据并不是最终页面中使用的数据，例如A页面需要3个 B页面需要全部。我们取数据的时候肯定希望取得时候就是需要的数据，而不是取到以后在进行处理数据拿到想要的，那么getters就起到了重要的作用（可以处理一下原始的数据，把你想要的数据过滤出来）例如我再页面中去state 中数据的前三个就可以这样在页面中使用getters 的返回值会根据它的依赖被缓存起来，且只有当然得依赖值发生了改变才会被重新计算默认的参数是指向state 中定义的状态，state可以看做是原始状态，g.

2020-12-31 15:04:04 175

原创 vuex mapState的接收写法与由mapstate 所引发的导入导出写法

在state中定义好全局状态后，页面中接收的写法this.$store.state.xxx导入import { mapState } from 'vuex'es6写法1. computed: { isShow () { return this.$store.state.isTabberFlag } },2. // vuex 的另外一种导出的方法 computed: mapState(['isTabberFlag']),3.computed.

2020-12-31 14:34:23 555

原创 vuex action异步缓存，实现数据缓存在state中，减少请求，提高性能

接上一篇异步：用action做后端数据的缓存使用步骤:在state中定义一个变量用来做状态管理取这个变量this.$store.state.xxxx通过this.$store.dispatch('getComingListAction')将异步请求dispatch 到action中到state.js 的actions 中进行异步请求将接口的数据提交到mutation中在mutation 中将提交来的值赋值给 store 中的变量（状态）上代码1.在state中定义一个变量用来做状.

2020-12-30 17:23:49 1220

原创 Vuex的实战应用（1）

关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，

2020-12-30 15:17:37 305

转载 vuex中管理数据，刷新后数据丢失问题

在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：解决方法一：最先想到的应该就是利用localStorage/sessionStorage将数据储存在外部，做一个持久化储存，下面是利用localStorage存储的具体方案：方案一：由于state中的数据是响应式的，而数

2020-12-17 10:22:05 139

空空如也

空空如也