在 Vuex 存储中使用全局变量

Posted 2023-02-16

【中文标题】在 Vuex 存储中使用全局变量

【英文标题】：Using global variables inside Vuex store

【发布时间】：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 商店中使用一个全局变量

【参考方案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]