Vue.jsでのCookieの使用
![Vue.jsでのCookieの使用](http://note.favorite-color.net/cms/wp-content/uploads/2020/06/Vue.png)
Cookieで制御して閉じるボタンをクリックするまで要素を表示するで、基本的なCookieの使用を行った。
別途Vue.jsでもCookieの保存を行う必要があったため、下記の手順を行った。
1、vue-cookieを追加
◯yarnでのインストール
yarn add vue-cookie
◯npmでのインストール
npm install vue-cookie
2、main.jsへの記述追加
// Cookie import VueCookie from 'vue-cookie'; Vue.use(VueCookie);
3、出力するコンポーネントで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’);
参考サイト
-
前の記事
Cookieで制御して閉じるボタンをクリックするまで要素を表示する 2020.08.12
-
次の記事
【SourceTree/GitLab】SSHキー認証設定(キーの作成→設定) 2020.09.10