2021-10-06 vue3-你可能需要pinia来作为状态管理
前言
好久没写博客了，其实我之前和现在写博客的唯一目的，就是为了记录一些不重要，但是以后可能会用但会忘的资料，也就是为了以后方便自己查找。这是其一。
其二就是其实还是就懒。
Why
为是什么不使用官方的vuex，vuex其实已经不太适合vue3了，特别时vite+vue3+ts+script-setup
重要的一点，就是对于ts的支持不友好，想要ts类型提示，需要定义一大堆类型。
模块化使用其实也是复杂，且不算很好用。
官方的vuex5提案也是为了解决上述的问题。
pinia就是在以上场景下出来的，最贴切vuex5的。
pinia的作者也是vuex的重要作者。
Install
pnpm i pinia@next ## vue3需要@next，因为pinia同时支持vue2 pnpm也是目前比较流行的一个东西，对标npm
Me
怎么使用，不太详细说，程序员进阶第一步，官方文档。
主要说一下，我怎么使用：
1、模块化
自带模块化，且结合hooks
|- store
|---useSetting.ts
|---useNav.ts
|---useUser.ts例子如下：
import { defineStore } from 'pinia';
import local from '@/core/data';
import { KEY_SETTING } from '@/store/key';
export interface SettingStore {
dark: boolean;
}
const useSettingStore = defineStore({
id: 'setting',
state: (): SettingStore => ({
dark: false,
}),
});
//instance
export const initSettingStore = () => {
const instance = useSettingStore();
const l = local.getValue<Partial<SettingStore>>(KEY_SETTING, { dark: false });
instance.$patch({ ...l });
instance.$subscribe((_, state) => {
local.setValue(KEY_SETTING, { ...state });
});
};
export default useSettingStore;做了什么？
defineStore定义一个Store，这里的一个store，就可以理解为一个模块了。
你在其他地方只需要const setting = useSettingStore()就可以使用了！
那么我还作了什么？
2、持久化
instance.$subscribe((_, state) => {
local.setValue(KEY_SETTING, { ...state });
});将整个store持久化，我只需要3行代码
可以看见，天生的模块化（以及类似hooks），以及各种函数（比如$subscribe），解决了很多以前使用vuex的痛点。
Other
之前看，v2版本还在rc阶段，不过我已经在我两个个人项目使用了，非常好用。
对了，pinia是接合了vue dev tools的，所以放心使用！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-10-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录