Как получить доступ к переменным, объявленным в настраиваемом плагине Vue js внутри компонентов?

Question

Я создал собственный Vue js плагин для хранения глобальных переменных, например:

Константы. js файл:

import Vue from 'vue'
export default {

    install(Vue){

        Vue.Constants = {
            VERSION: '1.0.1'
        }
    }
}

Вот мой основной. js file:

import Vue from 'vue';
import App from './App';
import Constants from './plugins/Constants'

Vue.use(Constants);

new Vue({
    render: h => h(App)
}).$mount('#app')

Но когда я попытался получить доступ к этой константе в своем приложении. vue он говорит undefined:

{{ Vue.Constants.VERSION }}  // Not working
{{ Constants.VERSION }} // Not working

Я даже попытался импортировать Vue в приложение. vue вот так:

<script>
import Vue from 'vue'

// Rest of the code

<script>

Пожалуйста, предложите, есть статья о том, как создать и установить собственный плагин, но я не смог найти, как получить к нему доступ в Vue компонентах.

Answer 1

Вам нужно немного подправить свой код:

Константы. js файл:

export default {
  install(Vue, options) {
    Vue.prototype.$constants = () => {
      return {
        VERSION: '1.0.1'
      };
    };
  }
}

Вы должны добавить его в Vue.prototype not просто Vue. Кроме того, существует соглашение о добавлении к плагину префикса $ и нижнего регистра ($constants, а не Constants).

Это возвращает функцию, поэтому вы должны ее вызвать как функция:

App. js или любой другой SF C:

{{ $constants().VERSION }} // expected: 1.0.1

ПРЕДЛОЖЕНИЕ

Если вы только что немного обновили свой плагин, то это действительно могло быть «постоянное хранилище»:

Константы. js файл:

export default {
  install(Vue, options) {
    Vue.prototype.$constants = function(...args) {
      const constants = [
        [
          "VERSION",
          "1.0.1"
        ],
        [
          "RELEASE",
          "05/08/20"
        ],
        [
          "RELEASED BY",
          "I've released it."
        ]
      ]
      return args.length
        ? Object.fromEntries(constants.filter(([key]) => args.includes(key)))
        : Object.fromEntries(constants);
    };
  }
}

Если попробовать, то он довольно универсален:

App. js или любой другой SF C:

{{ $constants() }} // expected: { "VERSION": "1.0.1", "RELEASE": "05/08/20", "RELEASED BY": "I've released it." }
{{ $constants("VERSION", "RELEASE") }} // expected: { "VERSION": "1.0.1", "RELEASE": "05/08/20" }
{{ $constants("VERSION") }} // expected: { "VERSION": "1.0.1" }