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

Question

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

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

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

原文由 Louis Ameline 发布，翻译遵循 CC BY-SA 4.0 许可协议

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)
...

然后，如果您在 App.vue 中使用 console.log，则如下所示：

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

现在，看看你的控制台：

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

原文由 Daksh M. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

查看 App Vuex Store 的 Quasar 文档。

商店.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
    }
  }
})

主程序

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 团队的 官方入门指南

原文由 GMaiolo 发布，翻译遵循 CC BY-SA 4.0 许可协议