原文出处：https://andomahoro.top/#/view/20

在开发中分别使用sessionStore,localStorage,cookie应对不同的存储需求是常见的，如何在nuxt3+pinia的项目中同时使用这三者呢?笔者这里给出了一种解决方案：

首先安装所需插件：

 npm i @pinia/nuxt
 npm i @pinia-plugin-persistedstate/nuxt 
 npm i js-cookie

其次在nuxt.config.ts配置pinia,配置如下：

  modules: [
    ...
    "@pinia/nuxt",
    "@pinia-plugin-persistedstate/nuxt",
    ...
  ],

在项目目录下新建store文件夹用于存放存储相关的ts文件

这里给出了混合模式文件（useBlendStore.ts）和其它存储方案sessionStore,localStorage,cookie的文件，代码分别如下：

useBlendStore.ts（混合模式:sessionStore+localStorage）

//混合存储设置
interface State {
    name: string,
    age: number,
}
export const useBlendStore = defineStore('blendStore', {/*blendStore(key),不同内容可以新建不同文件设置不同key*/
    state: (): State => ({
        name: '',
        age:0,
    }),
    actions: {
        setName(name: string) {
            this.name = name
        },
        setAge(age: number) {
            this.age = age
        },
    },
    // 注意：persist定义要做判断，因为localStorage/sessionStorage是客户端参数，所以需要加process.client
    persist: process.client && [
        { 
            key: 'nameStore',
            storage: sessionStorage,//存储方式
            paths: ['name'] //不配置代表所有都使用此存储方式
        },
        { 
            key: 'ageStore',
            storage: localStorage, 
            paths: ['age'] 
        },
    ],
})

useSessionStore.ts（session）

interface State {
  name: string
}
export const useSessionStore = defineStore('sessionStore', {/*sessionStore(key),不同内容可以新建不同文件设置不同key*/
  state: (): State => ({
    name: '',
  }),
  actions: {
    setName(name: string) {
      this.name = name
    },
  },
  // 注意：persist定义要做判断，因为localStorage/sessionStorage是客户端参数，所以需要加process.client
  persist: process.client && {
    storage: sessionStorage,
  },
})

useLocalStore.ts（localStore）

interface State {
    name:string,
    age:number
}
export const useLocalStore = defineStore('localStore', {/*localStore(key),不同内容可以新建不同文件设置不同key*/
state: (): State => ({
    name: '',
    age:0,
}),
actions: {
    setName(name: string) {
        this.name = name
    },
    setAge(age: number) {
        this.age = age
    },
},
// 注意：persist定义要做判断，因为localStorage/sessionStorage是客户端参数，所以需要加process.client
persist: process.client && {
    storage: localStorage,
},
})

useCookieStore.ts（cookie）

import Cookie from 'js-cookie'; 

const ACCESS_TOKEN_KEY = "accessToken"

export function getToken(){
  return Cookie.get(ACCESS_TOKEN_KEY)
}

// 设置token
export function setToken(token:string){
  Cookie.set(ACCESS_TOKEN_KEY, token, { expires: 7 }) // 设置有效期 7 天，不设置默认同 sessionStorage 有效期一致
}

使用这四种存储方式的代码如下（vue3代码）：

<template>
   <div>
      <NuxtLayout name="tool">
         <div class="text-red-400">工具页模板xxxxxx</div>
         <el-button type="primary" size="default" @click="buttonClick">测试存储按钮</el-button>
      </NuxtLayout>
   </div>
</template>

<script setup>
import { useBlendStore } from '~/store/useBlendStore' //~ @路径都可以
import { useLocalStore } from '~/store/useLocalStore' 
import { useSessionStore } from '~/store/useSessionStore' 
import { getToken,setToken } from '~/store/useCookieStore' 

const blendStore = useBlendStore()
const localStore = useLocalStore()
const sessionStore = useSessionStore()

const buttonClick=()=>
{
   //console.log(sessionStore.name)
   //console.log(localStore.name)
   //console.log(localStore.age)
   //cookie
   console.log(getToken())
}
//浏览器执行
if(process.client)
{
   //不能写出process.client外面否则不成功
   //混合存储
   blendStore.setName("xxx测试")
   blendStore.setAge(12)

   //localStore
   localStore.setName("localStore存储测试")
   localStore.setAge(18)

    //sessionStore
   sessionStore.setName("sessionStore存储测试")

   //cookie
   setToken("ma23131312")

   //直接使用localStorage
   localStorage.setItem('data', "你好的额");
   console.log("浏览器执行")
}
//前端服务器执行
if(process.server)
{
   console.log("服务器执行")
}
console.log("测试") //client,server都会执行
</script>

运行后可在浏览器中观察不同的存储方式下的存储内容

localStorage的内容：
 

sessionStorage的内容
 

cookie的内容