vue.js - 如果使用全局 mixin head() 方法，则 Nuxt asyncData 结果未定义

Question

我想在一个地方在 Nuxt.js 中动态获取我的页面的标题。

为此，我创建了一个插件，它创建了全局 mixin，它为每个页面从服务器请求标题。我为此使用 asyncData 并将响应放入存储中，因为 SSR 在这里很重要。为了在页面上显示标题，我使用 Nuxt head() 方法和存储 getter，但它总是返回未定义。如果我在每个页面上都放置这个 getter，它会很好地工作，但我想在插件中只定义一次。这是 Nuxt 错误还是我做错了什么？

这是我写的插件：

import Vue from 'vue'
import { mapGetters } from "vuex";

Vue.mixin({
  async asyncData({ context, route, store, error }) {
    const meta = await store.dispatch('pageMeta/setMetaFromServer', { path: route.path })
    return {
      pageMetaTitle: meta
    }
  },
  ...mapGetters('pageMeta', ['getTitle']),
  head() {
    return {
      title: this.getTitle, // undefined
      // title: this.pageMetaTitle - still undefined
    };
  },
})

我想在插件中正确设置标题，现在它是未定义的

更新： Kinda 通过在全局布局中使用 getter 和 head() 解决了这个问题：

  computed: {
    ...mapGetters('pageMeta', ['getTitle']),
  }
  head() {
    return {
      title: this.getTitle,
    };
  },

但是仍然可以选择仅在插件中使用它吗？

更新 2 这是 setMetaFromServer 操作的代码

import SeoPagesConnector from '../../connectors/seoPages/v1/seoPagesConnector';

const routesMeta = [
  {
    path: '/private/kredity',
    dynamic: true,
    data: {
      title: 'TEST 1',
    }
  },
  {
    path: '/private/kreditnye-karty',
    dynamic: false,
    data: {
      title: 'TEST'
    }
  }
];

const initialState = () => ({
  title: 'Юником 24',
  description: '',
  h1: '',
  h2: '',
  h3: '',
  h4: '',
  h5: '',
  h6: '',
  content: '',
  meta_robots_content: '',
  og_description: '',
  og_image: '',
  og_title: '',
  url: '',
  url_canonical: '',
});

export default {
  state: initialState,
  namespaced: true,
  getters: {
    getTitle: state => state.title,
    getDescription: state => state.description,
    getH1: state => state.h1,
  },
  mutations: {
    SET_META_FIELDS(state, { data }) {
      if (data) {
        Object.entries(data).forEach(([key, value]) => {
          state[key] = value;
        })
      }
    },
  },
  actions: {
    async setMetaFromServer(info, { path }) {
      const routeMeta = routesMeta.find(route => route.path === path);
      let dynamicMeta;
      if (routeMeta) {
        if (!routeMeta.dynamic) {
          info.commit('SET_META_FIELDS', routeMeta);
        } else {
          try {
            dynamicMeta = await new SeoPagesConnector(this.$axios).getSeoPage({ path })
            info.commit('SET_META_FIELDS', dynamicMeta);
            return dynamicMeta && dynamicMeta.data;
          } catch (e) {
            info.commit('SET_META_FIELDS', routeMeta);
            return routeMeta && routeMeta.data;
          }
        }
      } else {
        info.commit('SET_META_FIELDS', { data: initialState() });
        return { data: initialState() };
      }
      return false;
    },
  }
}

标签： vue.jsvuexnuxt.jsserver-side-rendering