未定义 Vm - 带有 vue CLI 的 vue JS

Question

我正在为我的项目使用 vue-cli。 vue-route 和 vuex 也添加到项目中。路线运作良好。当我在路由中检查 vuex 存储数据时，出现 vm is not defined 错误。您可以在下面找到代码块。

main.js

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

window.vm = vm;

router.js

import Vue from 'vue'
import Router from 'vue-router'
import auth from './controller/authController'
import Login from './views/Login.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Dashboard, beforeEnter: auth.checkAuth },
    { path: '/login', component: Login }
  ]
})

问题就是从这里开始的。 Auth js 具有 vm 定义，因为它到达了 vuex 存储区。

auth js

function checkAuth() {
  vm.$store.getters.getServerPath();
.... bla bla 
.... bla bla 
}

希望有人给我提意见。如果需要，我可以分享更多细节。

Answer 1

您可以导出和导入 vue 实例，而不是依赖可用的 window 对象。

main.js

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

export const vueInstance = vm

auth.js

import { vueInstance } from '@/main'
function checkAuth() {
  vueInstance.$store.getters.getServerPath();
.... bla bla 
.... bla bla 
}

Answer 2

我认为在这种情况下更标准的方法是导入和导出 vuex 存储本身，而不是 vue 实例。

因此在您的 auth.js 中导入商店，然后直接访问它的 getters：

import store from '@/app/store/main.store'; // or whatever path it is
function checkAuth() {
  store.getters.getServerPath();
.... bla bla 
.... bla bla 
}

虽然我认为这比将实例（或商店）导出到 window 更好，但您问的是为什么 vm 在您的代码中未定义。我不确定，

您是否尝试直接从 window 引用 vm？我真的不知道，但是 vue-cli 代码或 babel 可能设置了 strict mode，因此您需要明确引用 window:

中的 window 属性

function checkAuth() {
  window.vm.$store.getters.getServerPath();
.... bla bla 
.... bla bla 
}

Answer 3

从安装上看，您似乎使用的是 VueCLI3。试试这个，不要把它放在 window..

main.js

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

router.js

import auth from './auth'
...
{ path: '/', component: Dashboard, beforeEnter: auth.checkAuth }

auth.js

import store from './store'
...
function checkAuth() {
  store.getters.getServerPath();
}
export default checkAuth

未定义 Vm - 带有 vue CLI 的 vue JS

Vm is not defined - vueJS with vueCLI

javascript

vue-router

vuex

vuejs2

vue-cli-3