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’);

参考サイト

it-swarm.dev

vuejsでCookieを設定する方法は？

https://www.it-swarm.dev/ja/javascript/vuejs%E3%81%A7cookie%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AF%EF%BC%9F/838022670/

github

alfhen / vue-cookie

https://github.com/alfhen/vue-cookie