Vue.jsでのCookieの使用

2020.08.18
Vue.js
Cookie

Cookieで制御して閉じるボタンをクリックするまで要素を表示するで、基本的なCookieの使用を行った。
別途Vue.jsでもCookieの保存を行う必要があったため、下記の手順を行った。

１、vue-cookieを追加
◯yarnでのインストール
yarn add vue-cookie

◯npmでのインストール
npm install vue-cookie

２、main.jsへの記述追加

// Cookie
import VueCookie from 'vue-cookie';
Vue.use(VueCookie);

３、出力するコンポーネントでCookieを保存
下記では、コンポーネント化しているボタンをクリックすることで、Cookieに情報が残る。

<Button @click="close">閉じる</Button>

<script>
export default {
  data() {
    return {};
  },
  created() {
    this.checkCookie();
  },
  methods: {
    close() {
      this.$cookie.set('close-btn', 'on', 30);
    },
    checkCookie() {
      if (this.$cookie.get('close-btn') !== 'on') {
        ※行いたい処理
      } else {
        ※行いたい処理
      }
    }
  }
};
</script>

◆Cookieの扱い
◇Cookieのセット
this.$cookie.set(‘test’, ‘Hello world!’, 1);
　　　　　　　　Cookie名,値,保存日数
◇Cookieの取得
this.$cookie.get(‘test’);

◇Cookieの削除
this.$cookie.delete(‘test’);