logo标签列表

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

javascriptvue.jsglobalquasar
11

在大多数 Vue.js 教程中，我看到这样的内容：

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

但我正在使用vue-cli（实际上是使用quasar），它为我声明了Vue实例，因此我不知道应该在哪里指定我想要store成为“全局”的Vue变量。我在哪里可以指定？谢谢。

6个回答
10

是的，你可以在入口文件（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文档中查看此内容。

编辑1:

从评论区中关于Quasar模板中“没有入口文件”的讨论中得知。

你可以前往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>

现在，请查看您的控制台： enter image description here

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

路易斯在评论@GMaiolo时提出了这个问题，在quasar-cli生成的应用程序中似乎没有你所暗示应该存在的入口点。 - Richard Matsen
是的，我找到了一种方法来做到这一点，它有点hacky，但可以在quasar cli中使用。 - Daksh M.
是的，我刚得出这个结论 - 在 App.vue 脚本的顶部添加原型属性。 - Richard Matsen
@DakshMiglani - 抱歉，我是在回复Louis的评论，请问是否有不同的意见需要分享。 - Richard Matsen
@RichardMatsen 我在 router.js 中也做了同样的事情。 - Daksh M.
显示剩余9条评论
3
您不需要像那样将store设置为全局变量，因为每个组件（this.$store）和Vue实例在初始声明后都可以访问到该存储库。
请查看Quasar文档中的App Vuex Store。 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团队的官方入门指南。
1
我的意思是我没有main.js文件，可以在那里编写“new Vue”并声明store。 - Louis Ameline
@LouisAmeline 你有看过我分享的Quasar文档吗？我相信它可以帮助你完成，我的代码只是为了阐述。无论如何，如果需要，在组件中尝试导入store本身。 - GMaiolo
是的，我已经阅读了它。在某个地方，他们写道 return this.$store.state.showcase.drawerState，但这不起作用，因为 this.$store 没有定义。我最初没有使用 Vuex 初始化项目，后来添加了它，也许这就是为什么它没有被自动处理的原因。不过其他答案都可以解决问题，我会接受其中一个答案。谢谢。 - Louis Ameline
@LouisAmeline，从Quasar官方论坛上看看这个链接：https://forum.quasar-framework.org/topic/1953/adding-a-store-vuex-later。如果你手动创建相应的文件夹和文件，它会自动从那里读取。 - GMaiolo
非常好，你是正确的。我实际上需要重新启动开发服务器，以便它可以识别新的“store”文件夹并自动将其添加到Vue的原型中。我会点赞你的答案，因为它在我的Vuex特定情况下很有帮助，但是我会把正确答案的功劳归给Daksh Miglani，因为我的问题也涉及到了Vue全局变量，并且他回答了这个问题。不过还是谢谢你！ - Louis Ameline
1
@LouisAmeline 好的，记住最好避免使用 store 作为实例属性，因为它已经存在 :) - GMaiolo
2
我们可以添加 实例属性。 通过这种方式，我们可以定义实例属性。
Vue.prototype.$appName = 'My App'

现在$ appName可以在所有Vue实例上使用，即使在创建之前也可以。
如果我们运行：
new Vue({
  beforeCreate: function() {
    console.log(this.$appName)
  }
})

然后，"我的应用程序"将被记录到控制台！
他说 vue-cli。 - Daksh M.
1

稍晚加入节目，但我个人在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
1
略微冗长，但根据本回复时的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`
  }
}
0

一种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'
  }
})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接