페이지를 새로 고친 후 Vuex가 검색되지 않는 이유는 무엇입니까?(nuxt)

페이지를 새로 고친 후 Vuex가 검색되지 않는 이유는 무엇입니까?(nuxt)

새로 고침 후 Vuex가 검색되지 않지만 모든 데이터가 콘솔에 출력됩니다.또한 새로 고침 후 일부 구성 요소가 올바르게 작동하지 않습니다.예를 들어 vee-validate를 사용하고 새로고침 후 뒤에서 얻은 모든 규칙과 필드는 사라지지만 필드는 표시됩니다.

Vuex는 홈 페이지에서만 새로 고침 후 모든 페이지에서 작동합니다.

stroe/index.displaces

export const state = () => ({});

const map = {
  ru: "ru",
  uk: "uk-ua"
};

export const getters = {
  lang(state) {
    return map[state.i18n.locale];
  }
};

export const mutations = {};

export const actions = {
  async nuxtServerInit({ state, dispatch }) {
    try {
      await dispatch('category/getCategories', {
      });
    } catch (err) {
      console.log('nuxt server init error', err);
    }
  }
};

홈페이지(모두 동작)

<template>
  <div>
    <main class="home-page">
      <banner />
      <section class="home_page">
        <div class="container">
          <phone-pay />
          <card-pay />
          <categories :categories="categories" :services="services" />
          <main-banner />
        </div>
      </section>
    </main>
  </div>
</template>

<script>
import Banner from "@/components/Index/Banner";
import PhonePay from "@/components/Index/PhonePay";
import CardPay from "@/components/Index/CardPay";
import Categories from "@/components/Index/Categories";
import MainBanner from "@/components/Index/MainBanner";

export default {
  components: {
    Banner,
    PhonePay,
    CardPay,
    Categories,
    MainBanner
  },

  async asyncData({ store, app: { $api }, error, req }) {
    try {
      const {
        data: { data: categories, included: services }
      } = await $api.CategoryProvider.getPopularCategories({
        params: {
          include: "services"
        }
      });
      return {
        lang: store.getters.lang,
        categories,
        services
      };
    } catch (e) {
      console.log("error index", e);
      error({ statusCode: 404, message: "Page not found" });
    }
  }
};
</script>

카테고리(동작하지 않음)

<template>
  <services-viewer :initial-services="initialServices" :category="category" :init-meta="initMeta" />
</template>
<script>
import ServicesViewer from "@/components/UI/ServicesViewer";

export default {
  components: {
    ServicesViewer
  },
  async asyncData({ store, route, error, app: { $api } }) {
    try {
      const {
        data: { data: initialServices, meta: initMeta }
      } = await $api.ServiceProvider.getServices({
        params: {
          "filter[category_slug]": route.params.id,
          include: "category"
          // "page[size]": serviceConfig.SERVICE_PAGINATION_PAGE_SIZE
        }
      });
      await store.dispatch("category/getCategories", {
        params: {}
      });

      const category = store.state.category.categories.find(
        ({ attributes: { slug } }) => slug === route.params.id
      );

      return {
        initialServices,
        category,
        initMeta
      };
    } catch (e) {
      const statusCode = e && e.statusCode ? e.statusCode : 404;
      error({ statusCode });
    }
  }
};
</script>

다음의 패키지를 인스톨 합니다.

npm install --save vuex-state

그런 다음 아래와 같이 스토어를 변경하면 페이지를 새로 고친 후에 데이터를 사용할 수 있습니다.

// store/index.js

import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
const createStore = () =>
  new Vuex.Store({
plugins: [createPersistedState()],

    state: {
    },

    mutations: {          
    },

    getters:{
    }

  });

export default createStore;

자세한 내용은 여기를 참조하십시오.

내가 풀었어.그것은 저의 실수였습니다.홈페이지에서 동작하는 시차 플러그인이 있습니다만, 다른 페이지로 이동해 리프레쉬 하면 플러그인이 기동해, 아이템을 찾을 수 없게 되어 페이지가 파손됩니다.

이 링크에 접속하여 질문해 주십시오.

nuxtServerInit 액션

nuxtServerInit 액션이 스토어에 정의되어 있고 모드가 유니버설인 경우 Nuxt.js는 컨텍스트와 함께 호출합니다(서버측에서만).클라이언트 측에 직접 제공하고 싶은 서버에 데이터가 있는 경우에 편리합니다.

예를 들어 서버 측에 세션이 있고 req.session.user를 통해 연결된 사용자에게 액세스할 수 있다고 가정합니다.인증된 사용자를 당사 스토어에 제공하기 위해 당사 스토어/index.js를 다음과 같이 업데이트합니다.

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}

언급URL : https://stackoverflow.com/questions/60207684/why-is-vuex-not-detected-after-refresh-page-nuxt