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.js
const 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 就能够间接关上,查看珍藏的内容。