如何在Nuxt.js的Vuex Store中访问自定义注入的全局变量

你遇到的报错有两个核心诱因：

1. Vuex的getter、action等方法如果用箭头函数声明，不会绑定独立的this上下文，此处的this指向外层作用域最终为undefined，无法读取挂载属性。
2. 直接访问Vue.prototype的方式在Nuxt的Vuex场景下不生效，Nuxt的store实例不会直接继承Vue原型属性，需要遵循Nuxt的注入规则访问。

Nuxt的inject方法执行后，会自动把注入的内容挂载到三个位置：Vue实例（页面/组件内this.$xxx可访问）、服务端上下文、Vuex store实例，只要使用正确的访问方式就能拿到。

方案1：修改getter为普通函数（最推荐） #

只需把getter从箭头函数改为普通函数声明，this就会正确指向store实例，直接访问注入的$products即可，原有调用代码无需修改：

// store/products.js
export const state = () => ({
  products: [],
})

export const getters = {
  // 改用普通函数声明，不要用箭头函数
  get_product(state) {
    return async (id) => {
      let loadedProduct = state.products.find(p => p.id == id)
      if(loadedProduct) {
        return loadedProduct
      }
      const fetchedProduct = await this.$products.find(id)
      // 建议把拉取到的产品存入state实现缓存，避免重复请求
      state.products.push(fetchedProduct)
      return fetchedProduct
    }
  }
}

方案2：调用时传入注入变量 #

如果不想修改getter的函数写法，可以直接在asyncData中把已经拿到的$products作为参数传给getter：
调用处代码修改：

async asyncData({store, params, $products}) {
  // 把$products作为第二个参数传入
  let product = await store.getters['products/get_product'](params.id, $products)
  return { 
    product
  }
},

getter代码修改：

export const getters = {
  get_product: state => async (id, $products) => {
    let loadedProduct = state.products.find(p => p.id == id)
    if(loadedProduct) {
      return loadedProduct
    }
    let fetchedProduct = await $products.find(id)
    return fetchedProduct
  }
}

方案3：用action中转逻辑（适合复杂业务场景） #

如果后续你的逻辑需要扩展更多副作用操作，也可以把拉取逻辑放到action中，普通函数声明的action同样可以通过this访问注入变量：

// store/products.js
export const actions = {
  async get_product({state, commit}, id) {
    let loadedProduct = state.products.find(p => p.id == id)
    if(loadedProduct) return loadedProduct
    const fetchedProduct = await this.$products.find(id)
    commit('save_product', fetchedProduct)
    return fetchedProduct
  }
}

export const mutations = {
  save_product(state, product) {
    state.products.push(product)
  }
}

调用时改用dispatch触发action即可：

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

内容的提问来源于stack exchange，提问作者Eric