vue 設定で Cookie を有効にする

インターネットの急速な発展に伴い、フロントエンドテクノロジーに注目する人が増えています。フロントエンド開発の重要な部分として、Vue フレームワークは徐々に人々の注目を集めるようになりました。この記事ではVueでCookieを設定する方法を紹介します。

Cookie は、ユーザーのコンピュータに保存される小さなテキスト ファイルで、Web サイトがさまざまな訪問者を追跡および識別するために使用できます。ユーザーが Web サイトにアクセスすると、サーバーはランダムな一意識別子を含む Cookie をユーザーに送信します。その後、ユーザーが Web サイトの各ページにアクセスすると、ブラウザは ID を確認して追跡するためにサーバーに Cookie を送信します。ユーザーの行動。

Vue で Cookie を有効にするにはいくつかの設定項目が必要になりますので、以下で一つずつ紹介していきます。

1. cookie-parser のインストール

まず、Vue プロジェクトのルート ディレクトリに、npm または Yarn を使用して cookie-parser をインストールする必要があります:

npm install cookie-parser # 或者 yarn add cookie-parser

2. cookie-parser の導入

次に、Vue プロジェクトで、main.js ファイルに cookie-parser を導入し、対応する構成情報を設定する必要があります:

import cookieParser from 'cookie-parser' Vue.use(cookieParser()) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App), }).$mount('#app')

3. Cookie を設定する

Cookie パーサーを通じて設定した後、Vue で Cookie を使用できるようになります。以下は Cookie を設定する例です。

this.$cookies.set('name', 'vue') // 设置cookie的时候，我们还可以设置一些选项来控制cookie过期时间等 this.$cookies.set('name', 'vue', { expires: 7 // 过期时间为7天 })

ここでは、this.$cookies.set() メソッドを使用して、「name」という名前の Cookie に「vue」という値を設定します。 Cookie 値の設定に加えて、有効期限などの 3 番目のパラメータで Cookie 関連のオプションを設定することもできます。

4. Cookie の取得

Cookie を設定した後、その値も取得する必要があります。これは、次のコードで実現できます。

this.$cookies.get('name')

5. Cookie の削除

Cookie も削除する必要があります。これは、次のコードによって実現できます。

this.$cookies.remove('name')

6. Cookie を閉じる

多くの場合、ユーザーの行動を追跡するために Cookie は必要ありません。その場合は、Cookie をオフにする必要があります。 Vue のクッキー。これは、Vue.config で対応するプロパティを設定することで実現できます。

Vue.config.productionTip = false Vue.config.devtools = false Vue.config.silent = true Vue.config.cookie = false

上記の 4 行のコードは、Vue のプロダクション プロンプト、開発ツール、コンソール出力、Cookie をそれぞれオフにします。このようにして、Vue で Cookie をオフにすることができます。

概要

この記事では、Cookie パーサーのインストール、Cookie パーサーの導入、Cookie の設定と取得、Cookie の削除、Cookie の終了など、Vue で Cookie を設定する方法を紹介します。実際の開発では、より正確なサービスをユーザーに提供するために、通常、Cookie を使用してユーザーの行動を追跡する必要があります。 Vue の Cookie 設定に関して、より良い提案や実践的な経験がある場合は、メッセージを残して共有してください。

以上がvue 設定で Cookie を有効にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。