Vue cookie的使用

目录

1、安装

2、引入

3、使用

4、拓展---介绍Vue3.0全局引入的方法

---

js-cookie 是关于 cookie 存储的一个js的API，用来处理cookie相关的插件。

参考网址：https://www.npmjs.com/package/js-cookie

1、安装

由于本人使用的是npm，所以只介绍了npm。

npm install js-cookie --save

2、引入

全局引入：在main.js中写入如下代码。只需要this.$cookies便可以在任何想使用的组件中去丝滑的使用。

//cookies和$cookies根据自己的喜好去起名；
import cookies from 'js-cookie'
Vue.prototype.$cookies = cookies;

按需引入：在想使用的组建中引入。

import Cookies from 'js-cookie'

3、使用

由于本人是按需引入的，因此不对全局引入的方式做示例了。

1、写入cookie：name为string ， expires为number 。

//name：你写想入cookie中的名字；  value ：你想写入的值；expires：有效期限（天）
Cookies.set('name', value)
Cookies.set('name', value, { expires: 7 })

2、读取cookie

Cookies.get('name')

3、删除cookie

Cookies.remove('name')

4、拓展---介绍Vue3.0全局引入的方法

上面的全局引入方法适用于Vue2.0，下面介绍一下Vue3.0的全局引入方法和全局引入的使用方法。

Vue3.0全局引入方法：使用的话直接$cookies就好了。

import { createApp } from 'vue'
import Cookies from 'js-cookie'
 
const app = createApp(App)
 
app.config.globalProperties.$cookies = Cookies