vue中cookie的使用

cookie的使用说起来非常的简单，不就是传入（设置）cookie，获取cookie值，删除cookie吗，说真的其实真的没有那么难，来咱们先来把设置cookie，获取cookie，删除cookie的方法进行一下封装，说白了就是给他放到一个单独的js内，方便我们去调用，这段代码也可以去网上去找找，都大同小异

//获取cookie、
export function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
      return (arr[2]);
    else
      return null;
  }
  
  //设置cookie,增加到vue实例方便全局调用
  export function setCookie (c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
  };
  
  //删除cookie
  export function delCookie (name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null)
     document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  };
  

接下来就是调用了，你可以在main.js内进行一下全局掉用，也可以在你使用的组件内来进行调用它，我这里就是在父组件内进行的调用

<script>
import Vue from 'vue'
import {setCookie, getCookie, delCookie} from './util/util.js';
//参数因为是三个方法，所以用大括号来进行调用了，路径一定要写对
export default {
  name: 'App',
  beforeMount () {
    Vue.prototype.$cookieStore = {
      setCookie,
      getCookie,
      delCookie
    }
  }
}
</script>

开始 的时候要先进行传入cookie值传的方法，看代码

this.$cookieStore.setCookie( 'name' , this.ruleForm2.name)
//‘name’是你自己取得名字，后面的this.ruleForm2.name是我写的一个input内v-model的值

最后在页面里进行使用获取的时候，可能就有很多人就像我一样懵了不知道应该怎么调用了，其实只需要放上一句话就行，看代码

this.$cookieStore.getCookie( 'name')

删除也是一样

this.$cookieStore.delCookie( 'name');

注意的是，那个name名字是不能取不一样的啊，当你传入‘name’了你获取和删除也要都用name才行

遇到的问题：   

我曾才main.js内这样引用过，当时也确实成功了，能够正常的传值获取值，但获取cookie值的时候，进入页面获取成功，能够正常打印和使用，但是当你点击刷新页面的时候他的获取功能就是去了作用，返回的值就是undefined,会出现报错，

import {setCookie, getCookie, delCookie} from './util/util.js';

Vue.prototype.$cookieStore = {
  setCookie,
  getCookie,
  delCookie
}

解决问题：

当时感觉应该是生命周期那运行的时候出现了问题，开始的时候，生命周期进行正常的运行，当你在页面进行刷新，生命周期出现断层导致getcookie没办法运行，

 beforeMount () {//以前正常运行的时候是mounted，往上走了一级就行了
    Vue.prototype.$cookieStore = {
      setCookie,
      getCookie,
      delCookie
    }
  }