为啥刷新页面后没有检测到Vuex？ （努努特）

Posted 2023-02-22

【中文标题】为啥刷新页面后没有检测到Vuex？ （努努特）

【英文标题】：Why is Vuex not detected after refresh page? (nuxt)为什么刷新页面后没有检测到Vuex？ （努努特）

【发布时间】：2020-05-29 03:39:56

【问题描述】：

刷新后未检测到Vuex，但所有数据都输出到控制台。同样在刷新后，某些组件的行为不正确。比如我用了vee-validate，我从后面得到的所有规则和字段，刷新后验证规则消失了，但是显示了字段

Vuex 适用于所有页面，但仅在主页上刷新后

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

主页（一切正常）

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

【问题讨论】：

我也明白了，Vue 选项卡经常莫名其妙地从控制台中消失。我虽然这只是其中之一......

这也发生在我身上。有一个tab，但是没有定义vuex

我觉得不是你的代码有问题，更可能是Vue和Vuex的习惯

【参考方案1】：

安装以下软件包：

npm install --save vuex-persistedstate

然后像下面这样更改您的商店，然后刷新页面后您的数据将可用。

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

更多详情，您可以阅读here。

【参考方案2】：

我解决了。这是我的错误。我有一个可以在主页上使用的视差插件，但是如果您转到另一个页面并刷新，该插件会启动并且无法找到该项目并破坏该页面。

【参考方案3】：

点击此链接回答您的问题

The nuxtServerInit Action

如果在 store 中定义了动作 nuxtServerInit 并且模式是通用的，Nuxt.js 将使用上下文调用它（仅从服务器端）。当我们在服务器上有一些数据要直接提供给客户端时，它会很有用。

例如，假设我们在服务器端有会话，我们可以通过 req.session.user 访问连接的用户。为了将经过身份验证的用户提供给我们的商店，我们将 store/index.js 更新为以下内容：

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