nuxt3中如何使用pinia以及持久化数据

       在使用nuxt3进行开发时，如果需要用到全局状态管理，那么可以使用pinia对数据进行管理。如何需要持久化也可以使用第三方库对数据进行持久化配置。        

       为什么要使用pinia,使用过vuex状态管理的应该都被其困扰过，特别是同步，异步等等使用起来那是相当的复杂，同时由于vuex的对ts的支持也不是很好，每次都得去看一下里面的字段。在组件中使用也感觉有的复杂，没有pinia这么简单。所以pinia能用的时候就直接放弃了vuex了。

• 第一步安装pinia

yarn add pinia @pinia/nuxt
# 或者使用 npm
npm install pinia @pinia/nuxt

• 第二步在nuxt.config.ts中配置

// nuxt.config.ts
export default defineNuxtConfig({
  // ... 其他配置
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

配置以上2步后其实就可以正常使用pinia相关的功能了，如果需要将数据进行持久化处理，可以安装pinia-plugin-persistedstate 第三方库。

• 安装pinia-plugin-persistedstate库

yarn add -D @pinia-plugin-persistedstate/nuxt

• 在plugins文件夹中创建pinia.ts，如果没有plugins文件夹新增就可以，pinia.ts内容如下

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export default defineNuxtPlugin((nuxtApp: any) => {
    nuxtApp.$pinia.use(piniaPluginPersistedstate)
})

如何使用：

import {defineStore} from 'pinia'
import {useNuxtApp} from '#app'

export interface UserState {
    token: string
    user_info: any
    showUserInfoModal: boolean
    isSignin: boolean
    showSigninModal: boolean
}

const useUserStore = defineStore({
    id: 'app-user',
    state: (): UserState => ({
        token: '',
        user_info: {
            username: 'boyyang',
            motto: '第一行没有你，第二行没有你，第三行没有也罢！',
            avatar: 'BOYYANG/default/avatar.png',
            cover: 'BOYYANG/default/bg.png',
        },
        showUserInfoModal: false,
        isSignin: true,
        showSigninModal: false
    }),
    getters: {
        getToken: (state) => {
            return state.token
        },
    },
    actions: {
        setUserInfo(userInfo: Signinup.UserInfo) {
            this.user_info = userInfo
        },
        setToken(t: string) {
            this.token = t
        },

    },
    //开启持久化
    persist: process.client && {
        key: 'app-user',
        storage: window.localStorage,
        paths: ['token', 'user_info'],
    },
})

const useUserStoreWithOut = () => {
    const {$pinia} = useNuxtApp()
    return useUserStore($pinia)
}

export {
    useUserStore,
    useUserStoreWithOut,
}