pinia总结
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐。也就是说vuex的下一代vuex5就是pinia。
1、Vue2 和 Vue3 都能支持
2、抛弃传统的 Mutation ,只有 state, getter 和 action ,简化状态管理库
3、不需要嵌套模块,符合 Vue3 的 Composition api,让代码扁平化
4、TypeScript支持
5、代码简介,很好的代码自动分割
与vuex对比
重置store
vuex
1.页面刷新: window.location.reload()
2.自定义重置方法
pinia
const userStore = useUserStores()
userStore.$reset()
数据持久化
数据持久化在很多场景下是很重要的,vuex就没有数据持久化。对于react来说,它有数据持久化库。当然pinia也有数据持久化能力,也就是下面库
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia);
模块开启持久化
const useHomeStore = defineStore("home",{
// 开启数据持久化
persist: true
// ...省略
});
灵活度
pinia可以很方便的模块化使用。
pinia可以全局store添加属性、状态、方法,也可以独立轻松添加,各store模块轻松互通。
typescript
习惯ts之后,你会发现没有ts是很难受的一件事情,刚好pinia更好的支持了ts。
轻
pinia体积更小、更容易理解、更简单。