Vue 使用js-cookie

js-cookie是一个简单、轻量级的JavaScript API，用于处理cookie 。

网站 https://github.com/js-cookie/js-cookie

安装: npm i js-cookie 

例子

1 创建一个 Pinia store 文件 user.js

import { defineStore } from 'pinia'
import Cookies from 'js-cookie'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: Cookies.get('token') || '',
    userInfo: {}
  }),

  actions: {
    // 设置token
    setToken(token) {
      this.token = token
      // 设置cookie，7天过期
      Cookies.set('token', token, { expires: 7 })
    },

    // 移除token
    removeToken() {
      this.token = ''
      Cookies.remove('token')
    },

    // 设置用户信息
    setUserInfo(info) {
      this.userInfo = info
    }
  },

  getters: {
    // 获取token
    getToken: (state) => state.token,
    // 获取用户信息
    getUserInfo: (state) => state.userInfo
  }
})

2 在组件中使用 login.vue

<template>
    <div>
      <button @click="login">登录</button>
      <button @click="logout">退出</button>
      <h2>{{ userStore.token}}</h2>
      <h2>{{ userStore.userInfo}}</h2>
    </div>
  </template>

  <script setup>
  import { useUserStore } from '@/store/modules/user'
  const userStore = useUserStore()
  const login = () => {
    // 模拟登录成功后获取token
    const token = 'your-token-value'
    userStore.setToken(token)

    // 设置用户信息
    userStore.setUserInfo({
      username: 'test',
      email: '[e-mail]'
    })
  }
  const logout = () => {
    userStore.removeToken()
    userStore.setUserInfo({})
  }
  </script>

效果

// 设置cookie的其他选项

Cookies.set('token', token, {
  expires: 7,  // 7天后过期
  path: '/',   // cookie路径
  domain: 'your-domain.com',  // cookie域名
  secure: true // 只在https下传输
})