1.vue3中应用vuex并进行长久化存储
export default { namespaced: true, state: { info: { a: 1 } }, mutations: { updateA(state, val) { state.info.a = val }, }, actions: { asyncUpdate(store, val) { setTimeout(() => { store.commit('updateA', val) }, 2000) } }, getters: { format(state) { return state.info.a } }}留神：mutation办法接管2个参数，第一个是以后state，第二个是要批改的value。
实现长久化存储的插件：vuex-persistedstate 主动将vuex数据存储在localStorage中，刷新页面时主动获取localStorage中的数据赋值到vuex中。
参考链接：参考链接
2.chrome浏览器无奈在本地手动设置cookie
景象：cookie项背景色变红，刷新无奈保留
解决办法：拜访地址chrome://flags/， 搜寻Partitioned cookies，将设置项改为Enabled，重启浏览器。
3.字符串补零
x.padStart(2, '0')第一个参数代表填充后生成的字符串长度，第二个参数代表填充到字符串中的内容。
4.react我的项目中无奈引入src目录外的动态文件
报错信息：Module not found: You attempted to import ... which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
解决办法：禁用 ModuleScopePlugin 插件
// craco.config.jsconst CracoLessPlugin = require('craco-less');const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');module.exports = { plugins: [ { plugin: { overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => { webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(p => p.constructor.name !== 'ModuleScopePlugin'); return webpackConfig; }, }, }, ]}5.a标签下载文件
如果href和js文件地址非同源，download属性不会失效。
如果援用的是第三方的网站或者说是前后端拆散的我的项目，调用后盾的接口，这时download就会不起作用。
文件名为中文且download不失效时，如何解决？
用js创立a链接，用blob模式下载文件
6.尾调用优化
尾调用：某函数的最初一步是调用另一个函数。
尾调用优化：只保留内层函数的调用记录。
如果所有的函数都是尾调用，那么能够做到每次执行时调用记录只有一项，将大大节俭内存。
目前，各大浏览器对es6各种个性的反对中，只有“尾调用优化”的反对度不高，只有Safari反对，其余浏览器都不反对。
7.函数参数是对象时的解构赋值
给对象的每个属性都设置默认值：
function fn({x=1,y=2}={}){}给整个对象设置一个默认值：
function fn({x,y}={x=1,y=2}){}8.ts中v-model的值是对象属性嵌套模式
const val = { radius: '', side: '',}const type= [ 'circle': { tip: '圆', model: 'radius' }, 'rect': { tip: '方', model: 'side' }]<template v-for="item in type"> <span>{{item.tip}}</span> <input v-model="val[item.model]"/></template>以上代码在ts中会报类型谬误，解决办法：在申明type时须要对model的类型进行阐明
interface Test{ radius: string, side: string,}const type:Array<{ tip: string, model: keyof Test,}> = [ 'circle': { tip: '圆', model: 'radius' }, 'rect': { tip: '方', model: 'side' }]keyof是索引类型查问操作符。
假如T是一个类型，那么keyof T产生的类型是T的属性名称字符串字面量类型形成的联结类型。
特地阐明:T是数据类型，并非数据自身。
9.解构赋值的作用
第一个，替换变量的值；
[x, y] = [y, x]第二个，从函数返回多个值；
let {x, y} = fn()第三个，函数参数的定义；
function fn ({x=0, y=0}={}){}fn({y:1,x:2})fn({x:1})fn()第四个，提取json数据；
let {id, name} = jsonData第五个，函数参数的默认值；
function fn(x = 1){}第六个，遍历map构造；
for(let [key, value] of map){}for(let [key] of map){}for(let [, value] of map){}第七个，输出模块的指定办法；
const {fn1} = require('xx')import {fn2} from 'yy'10.应用css的size-adjust和unicode-range扭转任意文字尺寸
<span class="price">100元</span>@font-face { font-family: smallYuan; src: local('PingFang SC'), local("Microsoft Yahei"); size-adjust: 20%; unicode-range: U+5143;}.price { font-family: smallYuan; font-size: 24px; color: red;}size-adjust 属性用在 @font-face 中，能够自定义字体的时候指定字号大小，值只能是百分比。火狐不反对。unicode-range 能够指定哪些字符利用这个自定义字体，反对任意数量的字符，也反对字符范畴。
size-adjust的外围竞争力是不须要应用html标签包裹须要扭转大小的字符。
size-adjust的其余作用：
冲破浏览器12px最小字号的限度；
值为0%时暗藏字符，但爬虫无奈辨认；
11.复制谷歌浏览器收藏夹
收藏夹相干文件所在目录：系统盘-用户-本人的用户名-AppData-Local-Google-User Data-Default。Bookmarks和Bookmark.bak两个文件里就是收藏夹的具体内容。
将Bookmarks的后缀改为.txt就能够间接关上，查看珍藏的内容。