С Vue-cli, где я могу объявить мои глобальные переменные? - PullRequest
Новая
       10

С Vue-cli, где я могу объявить мои глобальные переменные?

0 голосов
/ 12 июня 2018

В большинстве учебных пособий по Vue.js я вижу такие вещи, как 

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

Но я использую vue-cli (на самом деле я использую квазар), и он объявляет для меня экземпляр Vue, поэтому яне знаю, где я должен сказать, что хочу, чтобы store была глобальной переменной Vue-wide.Где мне это указать?Спасибо

Ответы [ 3 ]

0 голосов
/ 12 июня 2018

Мы могли бы добавить Свойства экземпляра

Таким образом, мы можем определить свойства экземпляра. 

Vue.prototype.$appName = 'My App'

Теперь $ appName доступен во всех экземплярах Vue, дажеперед созданием.

Если мы запустим: 

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

Тогда «Мое приложение» будет зарегистрировано на консоли!

0 голосов
/ 12 июня 2018

Вам не нужно делать такую ​​переменную store a global подобной, поскольку каждый компонент (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.Вы можете прочитать немного больше об этом здесь .

В любом случае вот официальное руководство по началу работы 1034 * от команды Vuex

0 голосов
/ 12 июня 2018

Да, вы можете установить эти переменные в файле точки входа (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:

из обсуждений в разделах комментариев о "нет файла точки входа" в квазареtemplate.

что вы можете сделать, это зайти в 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>

сейчас, посмотрите на вашу консоль: enter image description here

Вы также можете сделать то же самое в App.vue файле в теге скрипта.

...