Vue cookie从单独的js文件中设置为对象

// cookie.js

const Cookie = {
  // 设置Cookie
  set(key, value, expireDays) {
    const expireDate = new Date();
    expireDate.setDate(expireDate.getDate() + expireDays);
    const cookieValue = encodeURIComponent(value) + (expireDays ? ";expires=" + expireDate.toUTCString() : "");
    document.cookie = key + "=" + cookieValue;
  },
  
  // 获取Cookie
  get(key) {
    const cookieName = key + "=";
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      let cookie = cookies[i];
      while (cookie.charAt(0) === ' ') {
        cookie = cookie.substring(1);
      }
      if (cookie.indexOf(cookieName) === 0) {
        return decodeURIComponent(cookie.substring(cookieName.length, cookie.length));
      }
    }
    return null;
  },
  
  // 删除Cookie
  remove(key) {
    document.cookie = key + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC";
  }
};

export default Cookie;

// main.js

import Vue from 'vue';
import App from './App.vue';
import Cookie from './cookie.js';

Vue.prototype.$cookie = Cookie;

new Vue({
  render: h => h(App),
}).$mount('#app');

<template>
  <div>
    <button @click="setCookie">Set Cookie</button>
    <button @click="getCookie">Get Cookie</button>
    <button @click="removeCookie">Remove Cookie</button>
  </div>
</template>

<script>
export default {
  methods: {
    setCookie() {
      this.$cookie.set('name', 'John', 7);
    },
    getCookie() {
      const name = this.$cookie.get('name');
      console.log(name);
    },
    removeCookie() {
      this.$cookie.remove('name');
    }
  }
};
</script>