Vue-Cookies 使用教程

Vue-Cookies 使用教程

vue-cookiesA simple Vue.js plugin for handling browser cookies项目地址:https://gitcode.com/gh_mirrors/vu/vue-cookies

项目介绍

Vue-Cookies 是一个简单易用的 Vue.js 插件，用于处理浏览器 cookies。它允许开发者轻松地设置、获取和删除 cookies，适用于各种 Vue.js 项目。该项目在 GitHub 上开源，由 cmp-cc 维护。

项目快速启动

安装

首先，通过 npm 安装 vue-cookies：

npm install vue-cookies --save

引入和使用

在 main.js 文件中引入并使用 vue-cookies：

import Vue from 'vue';
import VueCookies from 'vue-cookies';

Vue.use(VueCookies);

设置和获取 Cookie

在 Vue 组件中，你可以使用以下方法来设置和获取 cookies：

// 设置 cookie
this.$cookies.set('keyName', 'value', '1d'); // 1天过期

// 获取 cookie
const value = this.$cookies.get('keyName');

// 删除 cookie
this.$cookies.remove('keyName');

应用案例和最佳实践

案例一：用户登录状态管理

在用户登录时，可以将用户的认证 token 存储在 cookie 中，以便在不同页面间保持登录状态：

// 登录时设置 token
this.$cookies.set('authToken', 'userTokenValue', '7d'); // 7天过期

// 检查登录状态
created() {
  const token = this.$cookies.get('authToken');
  if (token) {
    // 用户已登录
  } else {
    // 用户未登录
  }
}

案例二：主题切换

使用 cookie 存储用户选择的主题，以便在页面刷新后保持主题一致：

// 设置主题
this.$cookies.set('theme', 'dark', '30d'); // 30天过期

// 获取主题
const theme = this.$cookies.get('theme');
if (theme === 'dark') {
  // 应用暗色主题
} else {
  // 应用默认主题
}

典型生态项目

Vuex

Vuex 是 Vue.js 的状态管理库，可以与 vue-cookies 结合使用，以管理应用的全局状态。例如，在 Vuex 中存储用户的登录状态：

// Vuex store
const store = new Vuex.Store({
  state: {
    authToken: null
  },
  mutations: {
    setAuthToken(state, token) {
      state.authToken = token;
      this.$cookies.set('authToken', token, '7d'); // 7天过期
    }
  },
  actions: {
    checkAuthToken({ commit }) {
      const token = this.$cookies.get('authToken');
      if (token) {
        commit('setAuthToken', token);
      }
    }
  }
});

Axios

Axios 是一个基于 Promise 的 HTTP 库，可以与 vue-cookies 结合使用，以在请求中包含认证 token：

// Axios 配置
import axios from 'axios';

axios.interceptors.request.use(config => {
  const token = this.$cookies.get('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

通过这些结合使用，可以构建一个完整的用户认证和状态管理解决方案。

vue-cookiesA simple Vue.js plugin for handling browser cookies项目地址:https://gitcode.com/gh_mirrors/vu/vue-cookies