Vuex persistedstateは、すべてのあなたのVueとNuxtプロジェクトのために必要です

あなたがVueやNuxtアプリケーションで働いている場合、私はあなたがセッションを管理し、クッキーを保存し、localstorageでの作業を苦労していることを確信しています.
幸いにも、我々はこれらすべてを手伝うためにvuex-persistedstateパッケージを持っています.
パッケージをインストールし、プロジェクトに設定するだけです.それです.すべてのブラウザのリフレッシュは、アプリケーションの状態に影響を与えません.

インストール

npm install vuex-persistedstate // npm
// OR
yarn add vuex-persistedstate // yarn

用途
Vuex persistedstate 3X ( Vuex 3とVue 2用)

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});

VEPEX persistedstate 4X ( Vuex 4とVue 3用)

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});

Nuxtによる例.js
プラグインディレクトリ内のファイルpersistedState.client.jsを作成します.
注意:プラグインのXXXを指定します.クライアント.JS 'はクライアント側でのみ実行されます.Learn more

// ~/plugins/persistedState.client.js
import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState()(store)
}

次に、nuxt.config.jsファイル内でプラグインを更新します.

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [{ src: '~/plugins/persistedState.client.js' }],

それは、あなたのnuxtです.JSのアプリケーションは、現在永続的であり、マニュアルブラウザのリフレッシュを扱うことができるでしょう.
これがこのポストです.
あなたがどのようにそれがVueで働くかについて見たいならば.JSのアプリケーションは、下記のコメントを残してください、私もそれが含まれます.vuex-persistedstateを使用しているライブデモ:https://magic-nuxtjs.vercel.app/login
私はHow to add Magic Link to a Nuxt.js Applicationガイドでvuex-persistedstateを使用している.チェックアウトして、フィードバックを共有します.