0

我使用 Laravel/GraphQL API 将Vuex-ORM Graphql 插件安装到现有的 Nuxt 项目中，这样我就可以尝试避免使用 Apollo 缓存。不过，在我的一个组件中，我正在运行：

<script>
  import Notification from '~/data/models/notification';

  export default {
    computed: {
      notifications: () => Notification.all()
    },
    async mounted () {
      await Notification.fetch();
    }
  }
</script>

但是我收到了错误[vuex] unknown action type: entities/notifications/fetch。

我查看了调试日志，发现了几个可用的 getter（entities/notifications/query、entities/notifications/all、entities/notifications/find 和 entity/notifications/findIn）。我尝试在 Mounted 方法中运行 await Notification.all() 来消除错误，但是在 Vuex 中查看 Notifications 数据对象是空的。

这是我的其余设置：

nuxt.config.js

plugins: [
  '~/plugins/vuex-orm',
  '~/plugins/graphql'
],

插件/vuex-orm.js

import VuexORM from '@vuex-orm/core';
import database from '~/data/database';

export default ({ store }) => {
  VuexORM.install(database)(store);
};

插件/graphql.js

/* eslint-disable import/no-named-as-default-member */
import VuexORM from '@vuex-orm/core';
import VuexORMGraphQL from '@vuex-orm/plugin-graphql';
import { HttpLink } from 'apollo-link-http';
import fetch from 'node-fetch';
import CustomAdapter from '~/data/adapter';
import database from '~/data/database';

// The url can be anything, in this example we use the value from dotenv
export default function ({ app, env }) {
  const apolloClient = app?.apolloProvider?.defaultClient;
  const options = {
    adapter: new CustomAdapter(),
    database,
    url: env.NUXT_ENV_BACKEND_API_URL,
    debug: process.env.NODE_ENV !== 'production'
  };

  if (apolloClient) {
    options.apolloClient = apolloClient;
  } else {
    options.link = new HttpLink({ uri: options.url, fetch });
  }

  VuexORM.use(VuexORMGraphQL, options);
};

/data/adapter.js

import { DefaultAdapter, ConnectionMode, ArgumentMode } from '@vuex-orm/plugin-graphql';

export default class CustomAdapter extends DefaultAdapter {
  getConnectionMode () {
    return ConnectionMode.PLAIN;
  }

  getArgumentMode () {
    return ArgumentMode.LIST;
  }
};

/data/database.js

import { Database } from '@vuex-orm/core';

// import models
import Notification from '~/data/models/notification';
import User from '~/data/models/user';

const database = new Database();
database.register(User);
database.register(Notification);

export default database;

/data/models/user.js

import { Model } from '@vuex-orm/core';
import Notification from './notification';

export default class User extends Model {
  static entity = 'users';

  static eagerLoad = ['notifications'];

  static fields () {
    return {
      id: this.attr(null),
      email: this.string(''),
      first_name: this.string(''),
      last_name: this.string(''),

      // relationships
      notifications: this.hasMany(Notification, 'user_id')
    };
  }
};

/data/models/notification.js

import { Model } from '@vuex-orm/core';
import User from './user';

export default class Notification extends Model {
  static entity = 'notifications';

  static fields () {
    return {
      id: this.attr(null),
      message: this.string(''),
      viewed: this.boolean(false),

      // relationships
      user: this.belongsTo(User, 'user_id')
    };
  }
};

包.json

"@vuex-orm/plugin-graphql": "^1.0.0-rc.41"
4

1 回答 1

0

因此，为了让这个工作正常进行，我最终做出了一些真正有效的改变！

如果其他人遇到类似的问题，这就是我所做的......在我的 nuxt.config.js 中，将两个插件的顺序交换为：

plugins: [
    '~/plugins/graphql',
    '~/plugins/vuex-orm',
],

在我的 graphql.js 插件中，我重新排列了选项的顺序（首先是数据库，然后是适配器）：

const options = {
  database,
  adapter: new CustomAdapter(),
  url: env.NUXT_ENV_BACKEND_API_URL,
  debug: process.env.NODE_ENV !== 'production'
};
于 2020-11-25T15:48:50.413 回答