使用 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中看到这一点。

编辑1：

来自评论部分关于类星体模板中“无入口点文件”的讨论。

你可以做的是，去 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

您不需要像这样将store设为全局变量，因为每个组件（ this.$store ）和 Vue 实例本身在初始声明后都可以访问 store。

查看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访问。 您可以在此处阅读更多相关信息。

---

无论如何，这里是 Vuex 团队的官方入门指南

Answer 3

我们可以添加实例属性

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

Vue.prototype.$appName = 'My App'

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

如果我们运行：

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

然后“我的应用程序”将被记录到控制台！

Answer 4

与上述答案相比有点多余，但我发现这在回复时根据当前的Vuex 状态文档更简单。

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文件。

我创建了 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文件中添加一行以启动您的 Boot 文件：

/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 代码（Vue 页面的 JavaScript 部分
  • this.globalConstants.baseUrl.api

Answer 6

这个答案的另一种Vue3方法：

// Vue3

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

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