Question

我想在一处通过Nuxt.js动态获取页面标题。

为此，我创建了一个插件，该插件创建了全局mixin，该插件向服务器请求每个页面的标题。我为此使用asyncData并将响应放入存储中，因为SSR在这里很重要。为了在页面上显示标题，我正在使用Nuxt head（）方法并存储getter，但它始终返回undefined。如果我将此吸气剂放置在每个页面上都可以正常工作，但是我只想在插件中定义一次。那是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;
    },
  }
}

如果使用全局mixin head（）方法，则未定义Nuxt asyncData结果

0 个答案: