在 Vuex store 中使用全局变量

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

我只是先检查缓存中是否已经有该产品，如果是，我想return那个产品，否则我想获取一个产品。但是，我在 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 store 中使用一个全局变量

Answer 1

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

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

Answer 2

同时，我自己也做了一些尝试。我发现的也许可以帮助其他人解决同样的问题。

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

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

在 Vuex store 中使用全局变量

Using global variables inside Vuex store

javascript

vue.js

vuex

vuejs2