Почему Vuex не обнаруживается после обновления страницы sh? (Nuxt) - PullRequest
Новая
       80

Почему Vuex не обнаруживается после обновления страницы sh? (Nuxt)

0 голосов
/ 13 февраля 2020

Vuex не обнаруживается после refre sh, но все данные выводятся на консоль. Также после refre sh некоторые компоненты работают некорректно. Например, я использую vee-validate и все правила и поля, которые я получаю со спины, после refre sh правила проверки исчезают, но поля отображаются

Vuex работает на всех страницах, но после refre sh только на домашней странице

строка / индекс. js

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>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2020

Я решил это. Это была моя ошибка. У меня есть плагин параллакса, который работает на домашней странице, но если вы go перешли на другую страницу и сослались на sh, плагин запускается и не может найти элемент и ломает страницу.

0 голосов
/ 14 февраля 2020

установите следующий пакет:

npm install --save vuex-persistedstate

затем измените ваш магазин, как показано ниже, после чего ваши данные будут доступны после refre sh страницу. 

// 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;

для более подробной информации вы можете прочитать здесь .

...