2021-10-06 vue3-你可能需要pinia来作为状态管理

无道 2021-10-06 0 条评论 前端相关 阅读74 手机阅读

前言

好久没写博客了,其实我之前和现在写博客的唯一目的,就是为了记录一些不重要,但是以后可能会用但会忘的资料,也就是为了以后方便自己查找。这是其一。

其二就是其实还是就懒。

Why

为是什么不使用官方的vuex,vuex其实已经不太适合vue3了,特别时vite+vue3+ts+script-setup

重要的一点,就是对于ts的支持不友好,想要ts类型提示,需要定义一大堆类型。

模块化使用其实也是复杂,且不算很好用。


官方的vuex5提案也是为了解决上述的问题。

pinia就是在以上场景下出来的,最贴切vuex5的。

Home | Pinia (esm.dev)

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的,所以放心使用!

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
标签: pinia vue3
修改: 10月06日 17:49
这篇文章还没有评论呢~
点击刷新/生成验证码