分类 唠嗑 下的文章

store-persistedstate-killer

EN / 中文

杀手级别的持久化状态管理库


  • 可以为多个库提供持久化服务 (vuex, pinia)
  • 支持 TypeScript
  • 支持 预定义存储驱动 (localstorage, sessionstorage) 以及自定义驱动
  • 支持相对安全的存储环境(非明文)
  • ‍灵活的配置且没有副作用
  • 对开发友好的状态变更 Log
  • 持久化加强功能 (重命名...)

安装

npm i store-persistedstate-killer

快速使用

// main.ts
// pinia平台
import { plugins as killer, config } from 'store-persistedstate-killer'

createApp(App)
  .use(
    createPinia().use((context) => {
      killer.pinia.init(context)
      killer.pinia.use(context)
    })
  )
  .mount('#app')

Demo

Edit objective-sun-1wmt7

目标

  1. 用状态管理接管你的 storage,从此无需担心类型,像操作 store 一样操作 storage 即可
  2. 前端存储不再明文

killer 做的事情

设计

每一个平台的插件你可以单独引入它们,比如你是 pinia 平台,那你仅仅这样引入就可以了

createApp(App)
  .use(
    createPinia().use((context) => {
      killer.pinia.init(context)
      killer.pinia.use(context)
    })
  )
  .mount('#app')

killer 中每一个插件都包含2个部分, 一个就是 init,一个是 use

init

在应用初始化时,把我们 storage 内容同步到 store 中; 如若发现 store 有,但是 storage 没有的 state,也会执行一次同步。这个过程是双向的。在文档上方就有一个 killer的概要图,我们如果站在状态管理的视角下,可以理解 storage 为远端,双方的交流就可以当作pushpull

use

use 是 killer 的核心功能,它可以监听 state 的变更以及 patch 操作,它可以实时地把 state 同步给 storage


如你所见,如果你的业务中,仅仅需要监听 state 然后同步到 storage 这个需求,你也可以仅使用 use 这个插件

如果想看到更多有关平台插件的文档,你可以移步具体的文档中(就在下方)

支持的平台/库

PlatformLibDoc
pinia2
vuex4/5

核心

killer 为各个平台的插件提供了多个核心,使它们能够正常运转,每一个核心主要负责一个业务,比如说配置,加密,存储

配置

killer 本身自带一个开箱即用的配置,你如果有特殊的需要,可以去自定义它们。在此之前你需要了解各个插件的工作原理,我们以 pinia 举例子。pinia 由一个一个 store 组成,store 由 state,getters,action 组成,所以 killer 仅仅是在useStore()之后才运行的插件,killer 接管了 store 的 state,使之能够持久化到本地存储中;那么在持久化的过程中,我们可能需要做一些重命名, 加密数据等工作...

配置名含义类型默认建议
exclude排除指定的仓库名string[ ][ ]
include包含指定的仓库名string[ ][ ]
prefix缓存的key前缀stringpersistedstate-killer-建议传入有效的字符串
iv加密需要用的iv变量string''可以为空
isDev是否是开发环境booleanprocess.env.NODE_ENV === 'development'如果为false将自动加密
storageDriver插件预定义的存储驱动defineStorageDriverdefineStorageDriver('localStorage')支持传入localStorage和sessionStorage
store对仓库进行详细配置Partial<Record<K, StoreConfig>>没有默认配置
defineStorage自定义存储驱动setItem, getItem, removeItem, iteration没有默认配置如果预定义存储驱动defineStorageDriver没有满足你的需求,可以使用这个方法定义新的驱动

你的工程中的自定义配置可能就像这样:

import { plugins as killer, config } from 'store-persistedstate-killer'

createApp(App)
  .use(Router)
  .use(
    createPinia().use((context) => {
      config.defineConfig<'main'>({
        exclude: ['zhangsan'],
        include: ['main', 'test'],
        isDev: true,
        storageKey: 'seho',
        store: {
          main: {
            state: {
              hello: {
                rename: 'wuyu',
              }
            }
          }
        }
      })
      killer.pinia.init(context)
      killer.pinia.use(context)
    })
  )
  .mount('#app')

你可以看到, killer 提倡使用 ts 来构建插件,我们可以给 defineConfig 传入一个联合类型,声明需要对哪几个 store 进行操作,此时如果你在编写 include 和 store 配置时,将会有非常棒的类型提示。

ApiDescType
defineConfig注入配置doc

加密

前端的加密难道没有必要么?确实有人这么说,但是当我们把状态管理的数据明文暴露到 localstorage 中确实不是很好,尽管我们现在都这么做 。我们需要一款易用的加密,不仅可以给 killer 中内部使用,而且还可以暴露给用户,让用户可以加密 api,交换特殊信息?killer 内部使用了crypto-js,默认使用了浏览器ua -> base64, 同时你也可以根
据业务需要指定 key 和 iv。

import { crypto } from 'store-persistedstate-killer'

const _crypto = new crypto()
const message = 'hello, messagehello, messagehello, messagehello, messagehello, messagehello, messagehello, message'
const encryptData = _crypto.encrypt(message)
if (encryptData) {
  const decrypt = _crypto.decrypt(encryptData)
  console.log('解密结果', decrypt)
} else {
  throw Error('加密错误')
}

我们可以给构造函数传递一个 ctx

const _crypto = new crypto({
  iv: 'asdasdasdasdasdasdasdasd',
  key: 'sssaasdasdasdas234234s'
})

查看加密模块的类型声明

ApiDescType
encrypt加密` (data: string) => string \null`
decrypt解密` (data: string) => string \null`

往期回顾

2020年终总结

前言

每年都会写年终总结,目的就是为了3 5年后从博客中找出每一年的年终总结,可以一目了然看到成长,这种感觉是非常幸福的。今年真的收获巨大,因为完成了我职业生涯中很多第一次;或许前几年初入圈子有些许迷茫吧,虽然目前我对我今后几年的发展抱有很大期望,但是如果要达到我的最终目标,付出的时间和精力将会成倍上增。这个目标是什么,后面会有聊到。往年我写年终总结的时候主要是3个核心概念:疫情,心境成长,技术成长,今年我打算多增加几个板块,而且还会传一些图片上来,也算是一份宝贵经历。

先听首歌吧,边听边看

疫情

今年已经临近尾声,没想到西安疫情爆发,仅次于当年的武汉,不知道过年还能不能回家。我现在在家办公中,在家办公很舒服,但是有一点非常不好,我的生物钟全部被打乱了,每天11点睡,自然醒已经早上8点了;如果按照往常工作日,我应该是6点或者不到6点就起床了,但是这样也问题不大,省去了大量通勤时间,尽管我睡眠时间长,但是仍然有学习时间。西安疫情的事件上了很多次热搜,ZF的种种蜜汁操作,还有一码通小程序平均每周崩一次,应急预案也没有这次丢人真的丢大发了。

封城之后,时隔一周看到了政府的救济菜:白萝卜,大白菜,土豆,洋葱,但是不知道下一次送菜是什么时候...

疫情中不得不提的就是,我和几个小伙伴搞了一个核酸地图的小程序,可以清楚的看到自己身边有多少个核酸检测点,上线之后流量暴增,上了纸媒,也上了热搜,接受了采访,这一段经历真的是非常难忘。

IMG_0349.PNG

IMG_0350.PNG

小组开会的随手截图

WechatIMG3527.jpeg

随后当小区居家隔离,西安的临时检测点也就没了,这个程序在一段时间帮助了很多人,虽然现在它没有用处,但是它也曾出现过...

在家办公很爽,尤其是和姐姐们一起住,自己在屋里写代码,饭不用担心,只洗碗就够了哈哈,总之疫情居家生活还是蛮舒服的,舒服是相对的,相信大家也听说过西安有些小伙伴都饿晕了,也有出门买馒头被抓的,也有医院门口因为核酸流产的,也有老父亲因为送医不及时心脏病故,这样对比起来,我真的算幸运的了。


回顾老剧

跑男排面:

IMG_0090.JPG

薛仁贵传奇,真老剧了:

i45iqmbggfuik29.jpeg

怪侠一枝梅:

8c0f65f348ff435f91150b2a760608ee.png

庆余年:

v2-e3c1be7492a0a5b9b2eafc7504467820_1440w.jpeg

越狱1-5:

143892174951732900_a700x398.jpeg


推荐一些最近看的资源

不光有b站视频,还有最近一年写的比较好的文章,还有看的一些书

书籍

视频

文章


未来几年的打算

熟悉我的朋友们都知道,我毕业之后的工资很低很低,曾经只有1.2k只够养活自己,2年过去了,我的薪资差不多是翻了10倍多,听起来感觉很不错,但其实远远达不到我心中的高度,2022年将是我的第三年,在写这篇文章的前一天晚上,和朋友小马哥聊天,改变了一些原先计划:

WX20220105-152052.png

我决定还是2022年安稳过一年吧,因为2022年太多计划了,比如无止境的考试还有驾照,我希望安稳度过,而不是逞一时之快去拿所谓的15 16k的高薪offer。我希望2022年产出极高,水平提升极快,能够奠定相对扎实的基础去实现后面的事情。

我个人非常希望纸贵这个公司是我在中国近几年最后一家公司,这里的小伙伴很nice,等待疫情结束(几年后),如果我的本科以及雅思学习旅途顺利,我大概率将会申请国外的在职研究生,这也算圆了我的学习梦,也算是变相脱离内卷,也希望以后的职业发展将会在其他国家。

2022年非技术目标:

  • 一切考试顺利,英语学习顺利,驾照考试顺利

关于技术

今年说实话没什么开源的作品,大部分都是下半年开始做的,vite的流行意味着前端构建已经变天了,webpack纵然还有用武之地,但是中小新项目基本都会选择vite作为构建工具。vite的出现进一步的带动了esbuild等新兴工具的热度,使用go,rust等语言,借助语言特性可以使编译,检查等工作变得更快更靠谱。

在下半年,来到新团队,就开始搞模板搞新技术栈,开源了一套模板和项目管理工具

WX20220105-180205.png

也写了相关文章介绍了几个模板 基于vite的模板

同样的,写了一个较为完整的命令行工具

1641377080467.jpg

在来新团队时候,也做了一个试验性的东西就是低代码雏形,解决了模板代码生成的问题

WX20220105-180602.png

尽管这个项目不维护了哈哈: https://github.com/seho-code-life/code-template-generation-web

同样的,今年还给antdv以及esbuild-node-tsc(基于esbuild的tsc编译工具)贡献了一部分代码,而且还出了一款教程关于tsrpc(typescript的rpc框架)。

临近年底,也写了一个关于状态管理持久化的库,它是一个支持多平台的持久化插件,马上就发布了

WX20220105-181006.png

https://github.com/1018715564/store-persistedstate-killer

而且在公司内部做了2次分享,第一次是关于前端基建,第二次是关于全栈开发,第二次的经历录制成视频了换一个方式构建全栈应用

顺便说一句,slidev是真好用,用熟悉的语法构建ppt,真的省心不少,建议开发者以后使用slidev写ppt

今年技术这块没有取的突破进展,只是对rust和ts有了新的领悟,以后会在文章体现。明年团队有flutter的工作,到时候我也会分享一些flutter的小文。

2022年技术相关目标:

  • 学习rust和wasm
  • 学习flutter
  • vue3全家桶源码分析
  • 算法
  • ts水平提高
  • js基础和http基础

拜拜咯,2022年终总结见~

明天就是31号了,2021年的最后一天。2022年注定是一个神奇的一年,因为这必定是我提升最大的一年,明年有太多计划: 学驾照,学英语,学rust,参加更多的开源项目,看更多的书,要比平时更努力投入一点;而且将花一部分时间去录制视频放到b站,我开始尝试使用不同于文章的方式来讲述一个主题/概念,我会把在公司的公开分享和所想所得录制成视频保存。

为什么要录制视频呢?主要还是锻炼“说”,尝试和观众去交流,会让自己对一个主题理解的更加深刻,比写文章记忆的东西要更持久。这是我的最终目的。

最近在西安的小伙伴们真的非常受苦了,和我一样(真的哭了,无语),在公开的场合我不方便发表过多关于西安的看法,但是临近过年这个事情整的真的非常闹心。在疫情开始的时候,我就加入了许哥的小团队筹划一个核酸检测点的程序,结果上线1天就爆了,我们的小伙伴受到了很多电视台/纸媒的采访,也上了微博热搜,算是真的火了一把,做了一些有意义的事情。

近期安排:

  1. 之前写的pinia 持久化插件(2,3个月前)我其实很想上线,但是总是被耽搁,我希望1月就尽快完成
  2. vue3源码解析专栏(写了5 6篇了,我估计过年之前能发都不错了)
  3. rust的所有权整理文章(现在写了2个自然段)
  4. 前端架构工作流设计(算是一个读书笔记)

博客真的是个好东西,自己的博客中就是一方自己的小天地,这里都是技术圈子的朋友,虽然建立以来可能只有几十万次访问量,但是平均下来真的没多少人看,所以我经常在博客中说一些心里话。

事实上从我上初中家里的迎来第一台电脑开始,接触游戏很多,我承认游戏确实影响到了我,而且也间接导致了我中考失败。但是初中生涯中除了游戏还有编程,我建立了第一个属于自己的网站,也算是正式开启了我的创业小路,结交到了很多比我年长几岁的技术圈的人,可能现在他们都不从事这个行业了。由于网站业务繁杂加上本身酷爱游戏,学习自然是跟不上去了,导致我考了一个很差的高中。但是我意外迎来了事业第二春(哈哈哈哈)

所以我总说,人脉是最重要的,我利用了之前创建的人脉,高中期间涉及了3个创业项目,而且也真正的对好代码更加神往,想要往更高层次努力进军。然后提前毕业就来西安正式开始求学之旅,这2年时间非常感谢学校的何老师和乐老师教我后端技术,而且还遇到了一群好基友,我的好舍友们现在仍然活跃在各大互联网公司的不同岗位或者作为独立开发者,真的都特别厉害。

21岁,明年就迎来了我的第三个年头,可能是我眼光狭隘,照我目前的这个程度每天卷,应该在三年经验开发中算是还不错的。但是干这一行真的不能掉以轻心,你真的需要每天去死学,把每一天当成考研末日来过,你一年才会有所收获,才能弯道超车。在今年有一段时间内,我是真的学的昏天黑地。有一段时间我妈来西安,我早上5点多就起床准备开始学了,但是我妈见到就勒令我回去睡觉...

不管是80,90,00后只要你在互联网行业,你就要把每一天当成你被裁的最后一天度过,你要去学习,你要去提升,不管是技术维度,还是产品维度,运营维度,甚至是沟通维度,你要每一天有所收获,而不是每天一回家(没孩子的情况下)就躺在床上开始TIMI,久而久之你真的会废的。

这不是 “内卷”,很多人一看到我的状态就可能会说:“你别学了,躺平不好么,每天看代码,你不会吐么?”

我其实想说,你要是真热爱这一行,你不会吐的;换句话说,我也见过30多岁的资历非常丰富的工程师,对新技术的渴望,我就很佩服这样的人,因为他的斗志没有被一天的工作消磨掉,纵使他有孩子家庭,他也要去学习,这是态度,这是热爱。

说到谈恋爱,哈哈哈哈哈,今年我奶奶催过我,找对象这个事情,我真的不想找,但是又很渴望,哈哈。因为我可能不适合谈恋爱,我有自己的每天计划,我其实挺害怕别人突然打乱我的计划,可能是恐恋吧。我的二姐今年和我10年好朋友在一起了,说实话啊,真的挺甜的,说到这里我又留下了单身的泪水。一切都顺其自然吧,插一句,我大姐还单身,我们家都不是伏弟魔,兄弟们可放心,我是著名伏姐魔嘿嘿。

反正快过年了,每一年的年终总结都会有,技术方面的事情,咱们年终再聊。

放几张我二姐拍的照片吧,我个人不喜欢发照片

WechatIMG1694.jpeg

WechatIMG1733.jpeg

WechatIMG1734.jpeg

WechatIMG1735.jpeg

WechatIMG1895.jpeg

WechatIMG1896.jpeg