Vuex 商店中的 vue.js 变量在组件中无法访问

Question

我已经在 Vuex 中定义了BASE_URL store/store.js

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

并将商店导入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)
});

但是，当我尝试在组件中导入 BASE_URL 时：

    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);
          });

      },

我收到此错误：

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

这里可能有什么问题？如何解决？

Answer 1

你在方法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);
      });

  },