vue中cookie的使用

1.存放cookieimport md5 from ‘blueimp-md5‘import cookie from ‘js-cookie‘import url from ‘../api/url.js‘import http from ‘../api/http.js‘// 每个input输入框的错误提示显示的条件：// 1.匹配当前输入框输入的内容是否满足格式限制（从输入前就已经在实时判断）// 2.是否打开错误提示--此为手动打开export default {  data () {    return {      phone: null,      password: null,      phoneTips: false // 是否显示手机号验证错误提示    }  },  computed: {    phoneTest () {      var reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/      return reg.test(this.phone)    },    target () {      return this.$route.query.target    }  },  methods: {    clearPhone () {      this.phone = ‘‘      this.phoneTips = ‘‘    },    login () {      if (!this.phoneTest) {        this.phoneTips = true      } else {        http.post(url.login, {          phone: this.phone,          pwd: md5(this.phone + this.password)        }).then(res => {          cookie.set(‘sid‘, res.data.sid, { domain: ‘localhost‘ })//domain：是存放的地址：如果是在本地运行的代码改为localhost,如果要放在线上运行要改为线上的网址eg:http:www.kongxianlc.com那么domain:‘kongxianlc‘          cookie.set(‘phone‘, res.data.phone, { domain: ‘localhost‘ })          this.$router.push(this.target || ‘/‘)          console.log(this.phone)        })      }    }  }}

2.使用cookie 获取

import cookie from ‘js-cookie‘import url from ‘../api/url.js‘import http from ‘../api/http.js‘export default {  data () {    return {      userPhone: null,      subNav: false // 是否显示互动的二级菜单    }  },  methods: {    tabSubNav (bl) {      this.subNav = bl    },    logout () {      cookie.get(‘sid‘) && http.post(url.logout);      (this.$route.matched[0].path === ‘/account‘) && this.$router.push(‘/‘)      cookie.remove(‘sid‘, {domain: ‘.localhost.com‘})      cookie.remove(‘phone‘, {domain: ‘.localhost.com‘})      this.userPhone = null      window.$tips(‘账户退出成功‘)    }  },  created () {    this.userPhone = cookie.get(‘phone‘)    // console.log(cookie.get(‘phone‘))  }}

原文地址：https://www.cnblogs.com/wssdx/p/9960348.html