vue.js Variable in Vuex Speicher nicht zugänglich in der Komponente

Question

Ich habe BASE_URL in Vuex definiert store/store.js

export const store = new Vuex.Store({ 
    state: {  
     BASE_URL: 'http://127.0.0.1:8090', 
     isAuthenticated: false 
    }, 
    ... 

und importiert den Laden zu main.js

import Vue from 'vue' 
import App from './App.vue' 
import VueResource from 'vue-resource' 
import VueRouter from 'vue-router' 
import Routes from './routes' 
import {store} from './store/store' 


Vue.use(VueResource) 

Vue.use(VueRouter); 

const router = new VueRouter({ 
    routes: Routes, 
    mode: 'history' 
}); 


new Vue({ 
    store: store, 
    el: '#app', 
    router: router, 

    render: h => h(App) 
}); 

aber wenn ich versuche, BASE_URL zu importieren in eine Komponente:

computed: { 
     BASE_URL() { 
     return this.$store.state.BASE_URL; 
     } 

    }, 
    methods: { 

    login: function() { 
      axios.post(BASE_URL + "/api/login", { 
      username: this.username, 
      password: this.password, 
      }).then(function(data){ 
      console.log(data); 
      }); 

     }, 

I Erhalten Sie diesen Fehler:

Uncaught ReferenceError: BASE_URL is not defined 
    at VueComponent.login (webLogin.vue?e2e5:175) 
    at Proxy.boundFn (... 

Was könnte hier falsch sein? Wie man es repariert?

Answer 1

Sie haben Tippfehler in Code in Methode login.

login: function() { 
     axios.post(this.BASE_URL + "/api/login", { // you must have this here 
     username: this.username, 
     password: this.password, 
     }).then(function(data){ 
     console.log(data); 
     }); 

    },