Застосувати глобальну змінну до Vuejs

У мене є змінна javascript, яку я хочу передати глобально компонентам Vue після інстанціювання, отже, або кожен зареєстрований компонент має її як властивість, або до неї можна отримати глобальний доступ.

Примітка :: Мені потрібно встановити цю глобальну змінну для vuejs як властивість ТІЛЬКИ ПРОЧИТАТИ

Ви можете використовувати Global Mixin для впливу на кожен екземпляр Vue. Ви можете додавати дані до цього міксу, роблячи значення / значення доступними для всіх компонентів vue.

Щоб зробити це значення лише для читання, ви можете використовувати метод, описаний у цій відповіді на переповнення стека .

Ось приклад:

// This is a global mixin, it is applied to every vue instance. 
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
  data: function() {
    return {
      get globalReadOnlyProperty() {
        return "Can't change me!";
      }
    }
  }
})

Vue.component('child', {
  template: "<div>In Child: {{globalReadOnlyProperty}}</div>"
});

new Vue({
  el: '#app',
  created: function() {
    this.globalReadOnlyProperty = "This won't change it";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalReadOnlyProperty}}
  <child></child>
</div>

Просто додавання властивостей екземпляра

Наприклад, всі компоненти можуть отримати доступ до глобального appName, ви просто пишете один рядок:

Vue.prototype.$appName = 'My App'

$ це не магія, це домовленість, яку Vue використовує для властивостей, доступних для всіх екземплярів.

Крім того, ви можете написати плагін, який включає всі глобальні методи або властивості.

Ви можете використовувати міксин та змінити var у чомусь подібному.

// This is a global mixin, it is applied to every vue instance
Vue.mixin({
  data: function() {
    return {
      globalVar:'global'
    }
  }
})

Vue.component('child', {
  template: "<div>In Child: {{globalVar}}</div>"
});

new Vue({
  el: '#app',
  created: function() {
    this.globalVar = "It's will change global var";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalVar}}
  <child></child>
</div>

Ви можете використовувати Vuex для обробки всіх ваших глобальних даних

Якщо глобальна змінна не повинна бути записана нічим, в тому числі Vuejs, ви можете використати, Object.freezeщоб заморозити свій об'єкт. Додавання його до viewmodel Vue не розморозить. Інший варіант - надати Vuejs заморожену копію об’єкта, якщо об’єкт призначений для глобального запису, але тільки не Vue:var frozenCopy = Object.freeze(Object.assign({}, globalObject))

У VueJS 3 за допомогою createApp () ви можете використовувати app.config.globalProperties

Подобається це:

const app = createApp(App);

app.config.globalProperties.foo = 'bar';

app.use(store).use(router).mount('#app');

і викличте свою змінну так:

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})

doc: https://v3.vuejs.org/api/application-config.html#warnhandler

Якщо ваші дані реактивні, можливо, ви захочете використовувати VueX.

Можливість оголосити змінну в index.html, оскільки вона справді глобальна. Це можна зробити, додавши метод javascript для повернення значення змінної, і це буде ЧИТАТИ ТІЛЬКИ. Мені це сподобалось:

Припустимо, що у мене є 2 глобальні змінні (var1 та var2). Просто додайте до заголовка index.html цей код:

  <script>
      function getVar1() {
          return 123;
      }
      function getVar2() {
          return 456;
      }
      function getGlobal(varName) {
          switch (varName) {
              case 'var1': return 123;
              case 'var2': return 456;
              // ...
              default: return 'unknown'
          }
      }
  </script>

Можна зробити метод для кожної змінної або використовувати один метод із параметром.

Це рішення працює між різними комбінаціями vuejs, це справді глобальне значення.

У вашому файлі main.js вам потрібно імпортувати Vue так:

import Vue from 'vue'

Потім вам потрібно оголосити свою глобальну змінну у файлі main.js так:

Vue.prototype.$actionButton = 'Not Approved'

Якщо ви хочете змінити значення глобальної змінної з іншого компонента, ви можете зробити це так:

Vue.prototype.$actionButton = 'approved'

https://vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example