使用 Vue-cli，我在哪里声明我的全局变量？

Question

在大多数 Vue.js 教程中，我看到类似

的内容

new Vue({
  store, // inject store to all children
  el: '#app',
  render: h => h(App)
})

但是我正在使用 vue-cli（我实际上正在使用 quasar）并且它为我声明了 Vue 实例，所以我不知道我应该在哪里说我想要 store 成为 "Vue-wide" 全局变量。我在哪里指定？谢谢

Answer 1

是的，您可以在入口点文件 (main.js) 中像这样设置这些变量：

Vue.store= Vue.prototype.store = 'THIS IS STORE VARIABLE';

然后像这样在你的 vue 实例中访问它：

<script>
export default {
  name: 'HelloWorld',
  methods: {
    yourMethod() {
        this.store // can be accessible here.
    }
  }
}
</script>

您也可以在 vue-docs here 中看到这个。

编辑 1：

来自评论部分关于 quasar 模板中 "no entrypoint file" 的讨论。

你可以做的是，转到 src/router/index.js，在那里你将能够访问 Vue，通过它你可以像这样设置一个全局变量：

...
import routes from './routes'

Vue.prototype.a = '123';

Vue.use(VueRouter)
...

然后如果你 console.log 它在 App.vue 中，像这样：

<script>
export default {
  name: 'App',
  mounted() {
        console.log(this.a);
  }
}
</script>

现在，看看你的控制台：

您也可以在 App.vue 文件中的脚本标签中执行相同的操作。

Answer 2

我们可以添加 Instance Properties

像这样，我们可以定义实例属性。

Vue.prototype.$appName = 'My App'

现在 $appName 在所有 Vue 实例上可用，甚至在创建之前。

如果我们运行:

new Vue({
  beforeCreate: function() {
    console.log(this.$appName)
  }
})

然后"My App"将被记录到控制台！

Answer 3

你不需要像那样将 store 设为 global 变量，因为每个组件 (this.$store) 和 Vue 实例本身都有初始声明后访问商店。

查看 App Vuex Store 的 Quasar 文档。

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    updateCount(state) {
      state.count += 1
    }
  }
})

main.js

import App from './App.vue'
import store from '/path/to/store.js'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

如果您需要从组件中访问 store，您可以导入它（就像我们在 main.js 中所做的那样）并直接使用它 [注意这是一种不良做法] 或使用 this.$store 进行访问。您可以阅读更多有关 here.

的内容

无论如何，这是来自 Vuex 团队的 official Getting Started guide

Answer 4

与上述答案略有冗余，但我发现根据本回复时的当前 Vuex state documentation 这更简单。

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      // example
    },
    state: {
      cdn_url: 'https://assets.yourdomain.com/'
    },

    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}

...然后在您的组件中，例如YourPage.vuex

export default {
  name: 'YourPage',
  loadImages: function () {
    img.src = this.$store.state.cdn_url + `yourimage.jpg`
  }
}

Answer 5

加入节目有点晚，但我个人在Quasar中使用的路线是为我的全局常量和变量创建一个Boot文件。

我创建了引导文件（我称它为 global-constants.js，但你可以随意称呼它）。

/src/boot/global-constants.js

    import Vue from 'vue'

    Vue.prototype.globalConstants = {
      baseUrl: {
        website: 'https://my.fancy.website.example.com',
        api: 'https://my.fancy.website.example.com/API/v1'
      }
    }

    if (process.env.DEV) {
      Vue.prototype.globalConstants.baseUrl.website = 'http://localhost'
      Vue.prototype.globalConstants.baseUrl.api = 'http://localhost/API/v1'
    }

    if (process.env.DEV) {
      console.log('Global Constants:')
      console.log(Vue.prototype.globalConstants)
    }

然后在 quasar.conf.js 文件中添加一行以使您的引导文件启动：

/quasar.conf.js

    module.exports = function (ctx) {
      return {
        boot: [
          'i18n',
          'axios',
          'notify-defaults',
          'global-constants' // Global Constants and Variables
        ],

然后使用它：

来自 Vuex
- this._vm.globalConstants.baseUrl.api
- 例如：axios.post(this._vm.globalConstants.baseUrl.api + '/UpdateUserPreferences/', payload)
来自 Vue HTML 页面
- {{ globalConstants.baseUrl.api }}
来自Vue代码（JavaScript部分Vue页面
- this.globalConstants.baseUrl.api

Answer 6

备选方案Vue3 way to :

// Vue3

const app = Vue.createApp({})
app.config.globalProperties.$appName = 'My App'

app.component('child-component', {
  mounted() {
    console.log(this.$appName) // 'My App'
  }
})

使用 Vue-cli，我在哪里声明我的全局变量？

With Vue-cli, where do I declare my global variables?

javascript

vue.js

global

quasar

编辑 1：