Question

我创建了一个Vue组件，该组件可以导出异步功能。该组件充当调用我的API的包装器。它基于axios和一个caching组件，该组件依赖localforage来实现短暂的持久性。

import localforage from 'localforage'
import memoryDriver from 'localforage-memoryStorageDriver'
import { setup } from 'axios-cache-adapter'

export default {
    async cache() {
        // Register the custom `memoryDriver` to `localforage`
        await localforage.defineDriver(memoryDriver)

        // Create `localforage` instance
        const store = localforage.createInstance({
            // List of drivers used
            driver: [
                localforage.INDEXEDDB,
                localforage.LOCALSTORAGE,
                memoryDriver._driver
            ],
            // Prefix all storage keys to prevent conflicts
            name: 'tgi-cache'
        })

        // Create `axios` instance with pre-configured `axios-cache-adapter` using a `localforage` store
        return setup({
            // `axios` options
            baseURL: 'https://my.api',
            cache: {
                maxAge: 2 * 60 * 1000,          // set cache time to 2 minutes
                exclude: { query: false },      // cache requests with query parameters
                store                           // pass `localforage` store to `axios-cache-adapter`
            }
        })
    }
}

这是我在视图中导入和使用此组件的方式：

import api from '@/components/Api.vue'

export default {
    data() {
        return {
            userId: this.$route.params.id,
            userData: ''
        }
    },
    methods: {
        loadClient(userId) {
            const thisIns = this;
            api.cache().then(async (api) => {
                const response = await api.get('/client/find?id='+userId)
                thisIns.userData = response.data.data[0]
            }).catch(function (error) {
                console.log(error)
            })
        },
    },
    created() {
        this.loadClient(this.userId)
    },
}

我可以导入该组件，并且一切似乎正常。我从API返回数据。但是，每次通话后，我都会收到错误消息：

TypeError：无法读取未定义的属性“缓存”

引用以下行：

api.cache().then(async (api) => {

我无法理解为什么会发生这种情况或其含义。该错误本身表明我正在导入的组件未定义，尽管事实并非如此。如果是这样，我怀疑API调用最终将失败。相反，我被认为可能是我没有正确构造/导出异步cache（）函数。

Answer 1

经过进一步的审查，我实际上不理解为什么author has implemented是他的方式。为什么每次调用一次API时都要创建一个localForage实例？

我选择不使用组件，而只实例化一次localForage实例。

main.js

import localforage from 'localforage'
import memoryDriver from 'localforage-memoryStorageDriver'
import { setup } from 'axios-cache-adapter'

// Register the custom `memoryDriver` to `localforage`
localforage.defineDriver(memoryDriver)

// Create `localforage` instance
const localforageStore = localforage.createInstance({
    // List of drivers used
    driver: [
        localforage.INDEXEDDB,
        localforage.LOCALSTORAGE,
        memoryDriver._driver
    ],
    // Prefix all storage keys to prevent conflicts
    name: 'my-cache'
})

Vue.prototype.$http = setup({
    baseURL: 'https://my.api',
    cache: {
        maxAge: 2 * 60 * 1000,          // set cache time to 2 minutes
        exclude: { query: false },      // cache requests with query parameters
        localforageStore                // pass `localforage` store to `axios-cache-adapter`
    }
})

视图

export default {
    data() {
        return {
            userId: this.$route.params.id,
            userData: ''
        }
    },
    methods: {
        loadClient(userId) {
            const thisIns = this;
            thisIns.$http.get('/client/find?id='+userId)
                .then(async (response) => {
                    thisIns.userData = response.data.data[0]
                })
                .catch(function (error) {
                    console.log(error)
                })
        },
    },
    created() {
        this.loadClient(this.userId)
    },
}

TypeError：无法读取未定义的属性“缓存”-VueJS

1 个答案: