pinia在vue3中的使用pinia在vue3中的使用，pinia和Vuex的作用是一样的，它也充当的是一个存储数据的

pinia在vue3中的使用

一、pinia是什么？

官网解释：

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

从上面官网的解释不难看出，pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据允许我们在各个组件中使用。
实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。
优点：

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

二、下面是使用Pinia的详细步骤：

安装Pinia：在项目目录下运行以下命令安装Pinia：
```
 npm install pinia
```

创建和配置Pinia实例：在main.ts中，创建一个新的Pinia实例，并将其配置为Vue应用程序的插件，添加以下代码：

    import { createPinia } from 'pinia'
    const app = createApp(App)
    const pinia = createPinia()
    app.use(pinia)
    app.mount('#app')

定义Store，在你的应用程序中，创建一个或多个Store来管理状态。每个Store都是一个类，通过defineStore函数定义。

    import { defineStore } from "pinia" 
    export const useMain = defineStore('useStore', {    // 定义容器
      /**
       * 存储全局状态
       * 注意点：必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
      */
      state: () => {
        return {
         
        }
      },
      /**
       * 用来封装计算属性 有缓存功能  类似于computed
       */
      getters: {
        
      },
      /**
       * 编辑业务逻辑  类似于methods
       */
      actions: {
          
      }
    })

pinia实现数据持久化。

下载 pinia-plugin-persistedstate
```
  npm i pinia-plugin-persistedstate
```

  import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
  pinia.use(piniaPluginPersistedstate);

存储到localstorage。只需在store/index中加入persist:true即可（默认存储数据到localStorage中，键名默认为store设置的id名）。
```
// 开启数据持久化
persist:true,
```

存储在sessionStorage，键名为key

  persist:{
      // 修改存储中使用的键名称，默认为当前 Store的 id
      key: 'storekey',
      // 修改为 sessionStorage，默认为 localStorage
      storage: window.sessionStorage
   }

在页面中使用。

  import { useMain } from '../store' // 引入store
  const useStoreMain = useMain()

如果直接从pinia中解构数据，会丢失响应式，使用storeToRefs可以将store实例中的状态转换为ref对象，保证解构出来的数据也是响应式的。
```
  import { storeToRefs } from 'pinia'
  const { count } = storeToRefs(useStoreMain)
```