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体积更小、更容易理解、更简单。