无法在Nuxt应用中加载客户端上的库

Question

https://github.com/mohrtw/NuxtLoadLibraryOnClient/tree/master

NuxtLoadLibraryOnClient

问题：

我们导入的库未在客户端上加载。

应用程序的工作原理：

• pages / index.vue从＆＃34; ../ static / someObjects.js＆＃34;;
导入SO
• asyncData创建一个SO.AnObject
• components / util / objectLoader接收SO.AnObject为prop＆＃39; obj＆＃39;
• objectLoader的objectProcessor检查instanceOf＆＃39; obj＆＃39;是，然后返回该对象的属性
• objectLoader显示从index.vue
收到的数据

我们尝试了什么：

• 将库放在静态，资源和插件中
• 在商店中加载库
• 使用fetch而不是asyncData
加载数据

它应该如何运作：

• objectLoader的objectProcessor检查传递给它的数据是否是instanceOf AnObject或AnotherObject， 然后返回名称或标题。
• 然后浏览器应显示＆＃34;对象数据：Mohr＆＃34;而不是＆＃34;对象数据：没有工作＆＃34;

在objectProcessor中放置调试器表明服务器上加载了正确的数据， 但是导入的SO和OO对象是未定义的，因此它不能通过instanceOf检查并返回＆＃34;没有工作＆＃34;

组件/ util的/ objectLoader.vue ：

```

<template>
<div>
    <h1>from objectLoader</h1>
    <h2>Object data: {{objectProcessor(obj)}}</h2>
</div>
</template>

<script>
import SO from '../../static/someObjects';
import OO from '../../static/otherObjects';
//debugger;
export default {
    props:  ['obj'],

    methods: {
        objectProcessor: function (obj) {
            /* returns a name or title depending
            on the type of object
            */
            var result = '';
            debugger; // eslint-disable-line

            if (obj instanceof SO.AnObject) {
                result = obj.name; 
                console.log(result);
            } else if (obj instanceof OO.AnotherObject) {
                result = obj.title;
            } else {
                result = 'didn\'t work';
            }

            return result;
        }
    }
}
</script>

```