2022.3月遇到的知识点总结

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就可以直接打开，查看收藏的内容。