编辑1：

Question

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

这样的东西

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

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

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：

来自评论部分的讨论＆＃34;没有入口点文件＆＃34;在类星体的模板中。

你可以做的是，去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文件中执行相同操作。

Answer 2

您不需要像这样制作log_line_prefix 全局变量，因为每个组件（store）和Vue实例本身都可以访问初步申报后存储。

查看App Vuex Store的Quasar文档。

store.js

this.$store

main.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进行访问。您可以阅读更多关于here的内容。

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

Answer 3

我们可以添加Instance Properties

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

</div>
<div class="row">
  <div class="col-25">
    <label for="type">TYPE:</label>
  </div>
  <div class="col-75">
    <span class="text-danger" small>{{ form.type.errors }}</span>
      {{ form.type }}

  </div>

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

如果我们跑：

Vue.prototype.$appName = 'My App'

然后＆＃34;我的应用＆＃34;将被记录到控制台！

Answer 4

加入演出有点晚，但是我个人在 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代码（Vue页面的JavaScript部分
- this.globalConstants.baseUrl.api

Answer 5

对于上述答案来说有点多余，但是在回复时，根据当前的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 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'
  }
})

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

6 个答案:

编辑1：