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项目中没有此指针的访问权限，而您确实需要访问 store ，则只需使用

窗口。$ nuxt。$ store ，而不是 this。$ store ;

希望它将解决您的问题

访问动态组件内的nuxt $ store

1 个答案: