在 Vuex 存储中使用全局变量答案

【问题标题】：Using global variables inside Vuex store在 Vuex 存储中使用全局变量
【发布时间】：2021-12-07 03:17:33
【问题描述】：

我将自定义全局变量注入 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 有点不同，但它的工作原理几乎相同。我在 store 文件夹 中的 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
        }
    }
}

我只是先检查我是否已经在缓存中拥有该产品，如果是，我想退回该产品，否则我想获取一个产品。但是，我在 this.$products 上遇到了错误。错误说：

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
        }
},

我已经尝试在 vuex 商店中使用 Vue.prototype.$products 而不是 this.$products，但不幸的是这并没有帮助。有什么解决办法吗？ 我需要在 vuex 商店中使用一个全局变量

【问题讨论】：

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

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

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

【讨论】：

感谢建议，但我找到了解决方法。与此同时，我做了一些研究并自己尝试了一些东西。令人惊讶的是，在 js 窗口全局变量中插入了一个 $nuxt 属性。因此，您可以在 vuex 商店中使用 window.$nuxt.$products，而不是使用 this.$product 或 Vue.prototype.$product 来访问它。

【解决方案2】：

与此同时，我自己也尝试了一些东西。我发现的东西也许可以帮助其他有同样问题的人。

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

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

【讨论】：