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;
});
通过这些结合使用,可以构建一个完整的用户认证和状态管理解决方案。