Why is Vuex not detected after refresh page? (nuxt)

Question

Vuex is not detected after refresh, but all data is output to the console. Also after refresh, some components behave incorrectly. For example, I use vee-validate and all the rules and fields I get from the back, after refresh the validation rules disappear, but the fields are displayed

Vuex works on all pages but after refresh only on the home page

stroe/index.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);
    }
  }
};

home page (everything works)

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

category (does not work)

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

Answer 1

follow this link for your question

The nuxtServerInit Action

If the action nuxtServerInit is defined in the store and the mode is universal, Nuxt.js will call it with the context (only from the server-side). It's useful when we have some data on the server we want to give directly to the client-side.

For example, let's say we have sessions on the server-side and we can access the connected user through req.session.user. To give the authenticated user to our store, we update our store/index.js to the following:

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

Answer 2

I solved it. It was my mistake. I have a parallax plugin that works on the home page, but if you go to another page and refresh, the plugin starts and cannot find the item and breaks the page.

Answer 3

install the below package:

npm install --save vuex-persistedstate

then change your store like below, then your data will be available after refresh the page.

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

for more details you can read from here.