Vm не определено - vueJS с vueCLI - PullRequest
Новая
       42

Vm не определено - vueJS с vueCLI

0 голосов
/ 19 декабря 2018

Я использую 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 
}

Надеюсь, кто-нибудь даст мне совет.При необходимости могу поделиться более подробной информацией.

Ответы [ 3 ]

0 голосов
/ 19 декабря 2018

Я думаю, что в этом случае более стандартным подходом является импорт и экспорт самого хранилища vuex , а не экземпляра vue.

Итак, в вашем auth.js вы импортируете хранилище изатем получите прямой доступ к его получателям: 

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

Хотя я считаю, что лучше экспортировать экземпляр (или хранилище) в window, но вы спрашиваете, почему vm не определено в вашем коде.В этом я не уверен,

Вы пытались сослаться на vm непосредственно из window?Я действительно не знаю, но код vue-cli или babel, вероятно, установил strict mode, поэтому вам нужно явно ссылаться на window свойства window: 

function checkAuth() {
  window.vm.$store.getters.getServerPath();
.... bla bla 
.... bla bla 
}
0 голосов
/ 19 декабря 2018

Похоже, вы используете 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
0 голосов
/ 19 декабря 2018

Вы можете экспортировать и импортировать экземпляр vue, не полагаясь на доступность объекта окна.

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 
}
...