localStorage에서 vuex 저장소를 로드하는 데 시간이 너무 오래 걸립니다.

localStorage에서 vuex 저장소를 로드하는 데 시간이 너무 오래 걸립니다.

저는 아래 Nuxt를 가지고 있습니다.JS 설정:

Vuex-persist 플러그인:

import VuexPersistence from 'vuex-persist'
  
export default ({ store }) => {
    new VuexPersistence({
      key: 'vuex', 
      storage: window.localStorage, 
    }).plugin(store);
}

패키지.json:

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/firebase": "^7.6.1",
    "@nuxtjs/pwa": "^3.3.5",
    "@tailwindcss/forms": "^0.3.3",
    "core-js": "^3.15.1",
    "firebase": "^8.6.8",
    "lodash": "^4.17.21",
    "nuxt": "^2.15.7",
    "nuxt-i18n": "^6.27.2",
    "sass": "^1.35.1",
    "vue-lodash": "^2.1.2",
    "vue-tailwind": "^2.4.1",
    "vuelidate": "^0.7.6",
    "vuex-persist": "^3.1.3"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/moment": "^1.6.1",
    "@nuxtjs/tailwindcss": "^4.2.0",
    "@vue/test-utils": "^1.2.1",
    "add": "^2.0.6",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^27.0.5",
    "eslint": "^7.29.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.12.1",
    "jest": "^27.0.5",
    "node-sass": "^6.0.1",
    "postcss": "^8.3.5",
    "sass-loader": "^10",
    "vue-jest": "^3.0.4",
    "yarn": "^1.22.10"
  }
}

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    {
      src: '~/plugins/vuelidate.js',
      mode: 'all',
    },
    {
      src: '~/plugins/vue-lodash',
    },
    {
      src: '~plugins/vue-tailwind',
    },
    {
      src: '~/plugins/vuex-persist',
      mode: 'client'
    }


  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    // '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/dotenv',
    '@nuxtjs/moment',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/firebase',
    'nuxt-i18n',
  ],

  axios: { credentials: false },

  i18n: {
    locales: [
      {
        code: 'nl',
        iso: 'nl-NL',
        name: 'Nederlands',
      },
    ],
    defaultLocale: 'nl',
    noPrefixDefaultLocale: true,
    vueI18n: {
      fallbackLocale: 'nl',
      messages: {
        nl: require('./locales/nl.json'),
      },
    },
  }
  ,

  firebase: {
    config: {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
      measurementId: process.env.FIREBASE_MEASUREMENT_ID,
    },
    services: {
      auth: true
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en'
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

cart.js

<template>
  <div>
    <h1>Cart</h1>
    <CartCard
      v-for="product in products"
      :key="product.id"
      :product="product"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters({
      products: "cart/products",
    }),
  },
};
</script>

매번 일기 카드 페이지 장착한 나는 즉시, 카드들에서 렌더링에 좋은 초당은 H1하중을 참조하십시오.localStorage는 어디에 고집하다 플러그는 현재는 제 vuex-store를 넣고 있다.나라면 어느 쪽 producs의 배열을 반환합니다 주에서 그것 뒤에 어떤 복잡 없이는 흡착제 검색합니다.

페이지를 동기화할 수 있도록 이 프로세스를 고속화/효율화할 수 있는 방법이 있습니까?

언급URL : https://stackoverflow.com/questions/68319766/loading-vuex-store-from-localstorage-takes-too-long