1.存放cookie
import 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‘))
  }
}

vue中cookie的使用