在动态组件中访问 nuxt $store

Question

我正在开发一个基于 Promise 的模态组件，它提供了将组件指定为模态本身的主体的可能性。为了达到这个结果，我认为一个好的解决方案是在模态模板中使用动态组件。 但是，在 NUXT 应用程序中，如果组件引用了 Vuex 实例（this.$store），则结果是未定义的（或者更好的是没有 $store 对象属性）。同样，在插件内部进行的任何注入都会导致未定义（例如，inject('api', api) 创建属性 $api，但结果未定义）。 如果我只是以“标准”方式使用组件（例如，将其放在页面或其他组件模板中），一切正常。

在以编程方式传递组件之前，我应该做一些“额外的注入”。

谁能帮帮我？

NUXT 项目结构（简化）：

• /pages/index.vue
• /plugins/api.js
• /store/auth.js
• /components/HelloComponent.vue

/plugins/api.js

let api = {}

api.call = function (request, auth, unpack, axios = this.axios) {
  if (!request) Error('backend.js:call invalid params:', request, auth, unpack, axios)

  if (auth) {
    if (request.headers)
      request.headers['Authorization'] = 'Bearer ' + this.auth.accessToken
    else
      request.headers = { 'Authorization': 'Bearer ' + this.auth.accessToken }
  }
  return axios(request).then((response) => unpack ? response.data : response)
}

api.getAPI = function (api, params, auth = true, unpack = true) {
  if (!api) Error('api.js:getAPI invalid params:', api)
  console.log('api.js:getAPI api:', api)
  return this.call({ method: 'get', url: api, params: params }, auth, unpack)
}

api.postAPI = function (api, params, data, auth = true, unpack = true) {
  if (!api) Error('api.js:postAPI invalid params:', api, data)
  console.log('api.js:postAPI api:', api)
  return this.call({ method: 'post', url: api, params: params, data: data }, auth, unpack)
}


/*******************************************************/
/*         NUXT plugin and reference injection         */
/*******************************************************/

export default function (context, inject) {

  console.log('[CALL] api.js')

  /* assign global $axios instance */
  api.axios = context.$axios

  /* assign auth instance to access tokens */
  api.auth = context.store.state.auth

  /* inject backend reference into application instance */
  inject('api', api)
}

/pages/index.vue

<template>
  <div>
  
    <span>
      {{ $store.auth.state.name }} // -> Displays 'Chuck'
    </span>
    
    /* Object.keys(this).includes('$store): false'; Object.keys(this).includes('$auth): true' */
    <component :is="cComponent" /> // -> this.$store is undefined; auth: undefined
    
    <hello-component /> // -> Displays 'Chuck'; auth: Object {...}
  </div>
</template>

<script>
import HelloComponent from '../components/HelloComponent.vue'
export default {

  components: {
    HelloComponent
  },
  
  created () {
    this.$store.commit('auth/setName', 'Chuck')
  },
   
  computed: {
    cComponent () {
      return HelloComponent
    }
  }
}
</script>

/components/HelloComponent.vue

<template>
  <span>
    {{ $store.auth.state.name }}
  </span>
</template>

<script>
export default {

  created() {
    console.log('auth:', this.$auth)
  }
  
}
</script>

/store/auth.js

export const state = () => ({
  accessToken: null,
  refreshToken: null,
  name: null,
})

export const mutations = {

  setAccessToken(state, token) {
    console.info('auth.js:setAccessToken', token)
    state.accessToken = token
  },

  setRefreshToken(state, token) {
    console.info('auth.js:setRefreshToken', token)
    state.refreshToken = token
  },

  setName(state, name) {
    console.info('auth.js:setName', name)
    state.user = name
  },

}

Answer 1

如果你在Nuxt项目中没有this指针的访问权限，而你确实需要访问store，那么直接使用

window.$nuxt.$store 而不是 this.$store;

希望它能解决你的问题