在Vue中设置Coo的几种方法_javascript_^; + name.replace[.$
在Vue中设置Cookies的几种方法
在Vue中设置Cookies有多种方式，下面我会用更通俗的方式告诉你如何操作。 ---一、直接使用JavaScript设置Cookies
这个方法简单直接，就像你在家做饼干一样，自己动手丰衣足食。设置Cookie：
```javascript document.cookie = "name=value;expires=date;path=/"; ``` 解释： - `name=value`：这就是你要设置的Cookie名和值。 - `expires=date`：设置Cookie的过期时间。 - `path=/`：表示该Cookie在整个网站中都有效。获取Cookie：
```javascript function getCookie(name) { let matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } ```删除Cookie：
```javascript function deleteCookie(name) { document.cookie = name + '=; Max-Age=-99999999;'; } ``` ---二、使用第三方库如`js-cookie`
有时候，我们想要的东西太复杂了，直接动手太累，这时候就需要一些现成的工具来帮忙了。安装：
```bash npm install js-cookie ```在Vue组件中使用：
```javascript import Cookies from 'js-cookie'; // 设置名为name的Cookie，值为value，过期时间为7天 Cookies.set('name', 'value', { expires: 7 }); // 获取名为name的Cookie值 let value = Cookies.get('name'); // 删除名为name的Cookie Cookies.remove('name'); ``` ---三、使用Vuex持久化插件
如果你的项目规模较大，使用Vuex来管理状态，那么Vuex持久化插件可能更适合你。安装Vuex和Vuex持久化插件：
```bash npm install vuex vuex-persistedstate ```配置Vuex持久化插件：
```javascript import Vue from 'vue'; import Vuex from 'vuex'; import createPersistedState from 'vuex-persistedstate'; Vue.use(Vuex); const store = new Vuex.Store({ // ...你的Vuex状态 }); const persistor = createPersistedState({ storage: window.localStorage }); new Vuex.Store({ modules: { store: persistor.plugin(store) } }); ```在组件中使用Vuex状态：
```javascript // 插件会自动将Vuex状态持久化到Cookies中。 // 可以通过this.$store.commit('someMutation')来修改Vuex状态，并且这些状态会自动保存在Cookies中。 ``` ---| 方法 | 适用场景 |
|---|---|
| 直接使用JavaScript | 简单场景，不依赖任何库 |
| 使用第三方库 | 中等复杂度的项目 |
| 使用Vuex持久化插件 | 大型项目，集成状态管理 |