在Vuex存储中使用全局变量

Question

我将自定义的全局变量注入vue中。您可以看到下面的代码。

export default function (props, inject) {
    inject('models', {
        register(name) {
            const model = require(`@/models/${name}.js`)
            model.default(props, inject)
        }
    })
}

这是工作的，我没有问题使用这个，唯一的问题是当他们加载到vuex商店。我使用的是Nuxt.js，它的商店和vue.js有一点不同，但是它的工作原理几乎一样。我的products.js位于存储文件夹中，如下所示：

export const state = () => ({
    products: [],
})

export const getters = {
    get_product: state => async id => {
        let loadedProduct = state.products.find(p => p.id == id)
        let isAllreadyLoaded = loadedProduct != null ? loadedProduct : false
        if(isAllreadyLoaded) 
        {
            return loadedProduct
        }
        else 
        {
            let fetchedProduct = await this.$products.find(id)
            return fetchedProduct
        }
    }
}

我只需先检查是否已准备好将产品缓存，如果是的话，我想返回该产品，否则我想要获取一个产品。但是，我在这个问题上有个错误。错误上说：

TypeError: Cannot read properties of undefined (reading '$products'). 

我就是这样进入我的商店的

async asyncData({store, params, $products}) {
        let product = await store.getters['products/get_product'](params.id)
        return { 
            product
        }
},

我试着用Vue.Prototype。$产品而不是这个。$产品在vuex商店，但不幸的是，这没有帮助。有解决方案吗？我需要在vuex商店中使用一个全局变量

Answer 1

同时，我自己也试过一些东西。我所发现的也许是能帮助有同样问题的人的东西。

在vuex存储中，您不能访问自定义的全局注入变量，但可以访问主窗口变量。我发现，有一个$nuxtjs属性插入到window中，因此您可以使用以下方法访问全局nuxt变量：

let mycustomvariable = "$products"
window.$nuxt[mycustomvariable]

Answer 2

在Nuxt中，它的工作方式不同，您必须制作一个插件，然后将它注入其中。

请参阅：https://nuxtjs.org/docs/directory-structure/plugins/#inject-in-root--context