介绍

因为 nuxt 3 中还没有构建 Auth 库，所以我正在尝试创建自己的可组合项 useAuth。

问题

当我尝试调用 loginRedirect 或 loginPopup 方法时，出现 startPerformanceMeasurement 错误。

Uncaught (in promise) TypeError: this.startPerformanceMeasurement is not a function
    at PerformanceClient2.startMeasurement (PerformanceClient.ts:100:45)
    at BrowserPerformanceClient2.startMeasurement (BrowserPerformanceClient.ts:46:55)
    at RedirectClient2.<anonymous> (StandardInteractionClient.ts:204:64)
    at step (_tslib.js:87:23)
    at Object.next (_tslib.js:68:53)
    at _tslib.js:61:71
    at new Promise (<anonymous>)
    at __awaiter (_tslib.js:57:12)
    at StandardInteractionClient2.getDiscoveredAuthority (StandardInteractionClient.ts:202:115)
    at RedirectClient2.<anonymous> (StandardInteractionClient.ts:142:48)

代码

可组合项/useAuth.js

Uncaught (in promise) TypeError: this.startPerformanceMeasurement is not a function
    at PerformanceClient2.startMeasurement (PerformanceClient.ts:100:45)
    at BrowserPerformanceClient2.startMeasurement (BrowserPerformanceClient.ts:46:55)
    at RedirectClient2.<anonymous> (StandardInteractionClient.ts:204:64)
    at step (_tslib.js:87:23)
    at Object.next …

先看我的代码，理解问题。

<template>
    <div class="header" 
        :class="flat ? 'flat' : null"
        :class="app ? 'app' : null">
    </div>
</template>

<script>
    export default {
        props: {
            flat: {
                type: Boolean,
                default: false
            },
            app: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style lang="scss">
    .header {
        width: 100%;
        height: 55px;
        background: white;
        box-shadow: 0px 3px 6px #ccc;
        transition: .8s ease-in-out;

    }
    .flat {
        box-shadow: none;
    }
    .app {
        padding-left: 10%;
        padding-right: 10%;
    }

</style>

所以正如你在这里看到的，我是否有我的平面道具，它会触发一个平面类来显示一个盒子阴影与否。但我也希望有人触发 app 道具，该道具将在标题中放置一些填充。

这里的问题是你不能在一个元素中放置多个 :classes 。有什么解决办法吗？

我使用 axios 对我的 json 文件进行了一次虚假的 api 调用。我从可以从中获取数据的函数中得到了一个承诺。但我不想要那样。我想从函数接收数据。

我现在的代码：products.js

export default {
    getAllProducts(axios) {
        return axios.get('fakedb.json').then(response => {
            return response.data;
        });
    }
}

视图文件：product.vue 文件

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: productController.getAllProducts(this.$axios).then(res => this.products = res)
    }
  },
}

但这不是我想要实现的目标。我想要实现的是我的product.vue 文件中的这段代码：

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: productController.getAllProducts(this.$axios)
    }
  },
}

我想接收数据而不必处理视图文件中的承诺。有什么解决方案如何在 products.js 文件中返回我的数据吗？

如果我像这样从 products.js 文件中正常返回，它就可以正常工作：

export default {
    getAllProducts(axios) {
        return [
          {
              "name": "Product1",
               "price": 9.75 …