Question

在Vue组件中，我可以轻松使用导入的库，例如vue-router。我可以使用this.$route.params.myVar访问所需的route参数。但是，如果我尝试在Vuex模块中执行相同的操作，则会收到错误：TypeError: Cannot read property 'myVar' of undefined。如何将在main.js中定义的Vue对象扩展到模块？

这是我的main.js：

import router from './router'
import Vuex from 'vuex'
import myModule from './my.module';

Vue.use(Vuex)

// Register VueX modules
const store = new Vuex.Store({
  modules: {
    myModule
  }
})

new Vue({
  router,
  render: h => h(App),
  store
}).$mount('#app')

还有my.module.js：

export default {
  namespaced: true,
  state: {
    ...
  },
  mutations: {
    ...
  },
  actions: {
    someAction() {
      console.log(this.$route.params.myVar)
    }
  }
}

很明显，this没有定义。我尝试在模块顶部实例化一个新的Vue对象，如下所示：

var vm = new Vue()

并将this更改为vm，但出现类似的Cannot read property 'myVar' of undefined错误。我还尝试在模块中重新实例化route类：

import route from 'vue-router'

并将失败的代码更改为route.params.myVar，但仍然出现Cannot read property 'myVar' of undefined错误。

Answer 1

从我的角度来看，您有两个选择。

在vuex动作中从外部传递param.myvar
将路由器导入vuex模块并使用

对于第二个选项，请确保导入您的路由器声明而不是库。例如。

import router from '@/router'

router.currentRoute.params.myVar

如何访问Vuex模块中的Vue对象？

1 个答案: