Pinia介绍和使用

pinia介绍

pinia是什么？

如果你学过Vue2，那么你一定使用过Vuex。我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。

既然Vuex那么重要，那么在Vue3中岂能丢弃！

在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理，我们来看看官网如何解释pinia的。

官网解释：

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

从上面官网的解释不难看出，pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据允许我们在各个组件中使用。

实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。

为什么要使用pinia？

优点：

• Vue2和Vue3都支持，这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。
• pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。
• pinia中action支持同步和异步
• 良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时候使用pinia就非常合适了
• 无需再创建各个模块嵌套了，Vuex中如果数据过多，我们通常分模块来进行管理，稍显麻烦，而pinia中每个store都是独立的，互相不影响。
• 体积非常小，只有1KB左右。
• pinia支持插件来扩展自身功能。
• 支持服务端渲染。

pinia的优点还有非常多，上面列出的主要是它的一些主要优点，更多细节的地方还需要大家在使用的时候慢慢体会。

pinia使用

pinia-plugin-persistedstate介绍

Pinia是一个基于Vue 3的状态管理库，它使得管理Vue的全局状态变得更加容易和直观。

而pinia-plugin-persistedstate是 Pinia 的官方插件之一，它提供了一种将 Pinia 状态持久化到本地存储的方式，以确保状态数据在刷新或关闭页面后仍然存在。

换句话说，Pinia是用于管理Vue 3应用程序的状态管理库，而pinia-plugin-persistedstate是为Pinia提供的一个插件，它允许您将Vue应用程序中的状态保存到本地存储中，以便在下一次访问应用程序时恢复状态。

安装

首先需要在项目中安装pinia和持久化插件pinia-plugin-persistedstate。

使用您喜欢的包管理器进行安装：pinia

yarn add pinia
# or with npm
npm install pinia
npm install pinia-plugin-persistedstate

 引入到项目

在main.ts文件引入pina组件

//引入pina
import pinia from '@/store/pinia'

const app = createApp(App)

app.use(pinia)

使用

引入pinia和pinia持久化插件pinia-plugin-persistedstate

import { createPinia,defineStore } from 'pinia'、
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

声明pinia并使用pinia持久化插件

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

定义仓库

 const wmsStore = defineStore('wmsStore', {
  state: () => {
    return {
      name: '游客',
      isMenuCollapse:false
    }
  },
  persist: {
    key: 'wms-store',
    storage: localStorage,
  },
})

export  {wmsStore}

之后哪里使用哪里导入就行