11

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

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

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

4

6 回答 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-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在脚本标签的文件中执行相同的操作。

于 2018-06-12T18:20:32.213 回答
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在组件中访问 from ，您可以导入它（就像我们在 中所做的那样main.js）并直接使用它[注意这是一种不好的做法]或使用this.$store. 您可以在此处阅读更多相关信息。

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

于 2018-06-12T18:37:09.533 回答
3

我们可以添加 实例属性

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

Vue.prototype.$appName = 'My App'

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

如果我们运行：

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

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

于 2018-06-12T18:23:36.480 回答
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`
  }
}
于 2019-10-07T02:01:29.983 回答
1

加入节目有点晚了，但我个人在QuasarBoot中使用的路线是为我的全局常量和变量创建一个文件。

我创建了引导文件（我称它为，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
于 2020-09-14T15:52:16.310 回答
0

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

// Vue3

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

app.component('child-component', {
  mounted() {
    console.log(this.$appName) // 'My App'
  }
})
于 2020-12-17T21:12:58.363 回答