使用 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 模板中“无入口点文件”的讨论。

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

...
import routes from './routes'

Vue.prototype.a = '123';

Vue.use(VueRouter)
...

然后，如果您在App.vue 中进行控制台登录，则如下所示：

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

现在，看看你的控制台：

你也可以在 App.vue 文件的 script 标签中做同样的事情。

Answer 2

我们可以添加Instance Properties

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

Vue.prototype.$appName = 'My App'

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

如果我们运行：

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

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

Answer 3

您不需要像这样将store 设为一个全局 变量，因为每个组件 (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
}

...然后在您的组件中，例如你的页面.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 文件中添加一行以启动您的引导文件：

/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 的替代方法this answer：

// Vue3

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

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