Установить значение глобального реквизита в Vue

#javascript #vue.js #vuejs3

Вопрос:

Я импортирую библиотеку компонентов в свой проект Vue 3.

Каждый экземпляр компонента использует одни и те же стили. Чтобы избежать ручного изменения реквизита каждого экземпляра, я использую глобальное свойство:

 app.config.globalProperties.$tooltipStyles = { width: '300px', minWidth: 'unset' };

Для этого я должен импортировать app в каждый файл и return его setup() . Я также должен установить его для каждого экземпляра:

 :styles="app.$tooltipStyles"

Есть ли способ установить это глобально, чтобы каждый раз, когда я использую компонент, он по умолчанию имеет эти стили?

Редактировать

Чтобы добавить к принятому ответу, я создал отдельный файл, который экспортирует один реактивный объект:

 import { reactive } from 'vue';

const global = reactive({
    $tooltipStyles: { width: '300px', minWidth: 'unset' },
    $tooltipPosition: 'right',
});

export default global;

Таким образом, я могу обновлять любое свойство на лету.

Например, когда экран ниже определенного размера, я могу изменить положение на 'top' :

 window.addEventListener('resize', () => {
    if (window.matchMedia('(max-width: 992px)').matches) {
        global.$tooltipPosition = 'top';
    } else {
        global.$tooltipPosition = 'right';
    }
})

И он обновляется соответствующим образом.

1. Я думаю, что я все же предпочел бы использовать более обязательный способ их определения, используя файл для хранения ref / reactive и выполнения импорта по мере необходимости.

2. Что вы имеете в виду? Вы имеете в виду вместо одного реактивного объекта отдельные реактивные свойства?

3. почти таким же образом (используя reactive ), но вместо использования app.config.globalProperties я бы пошел с утомительностью регистрации его для каждого компонента, через который он проходит import . Хотя в использовании глобального объекта нет ничего плохого, я нахожу, что у него есть некоторые недостатки, а именно то, что он, скорее всего, способствует разделению логики и функциональности. Если вы поместите переменные и функции в одно место (файл) и не привязываете их к внутренним компонентам приложения, у вас может быть более переносимое и поддерживаемое решение (хотя и более подробное). Но, TBC, это просто личное предпочтение.

Ответ №1:

Похоже, у вас почти все на месте.

Единственное, что вам не нужно указывать app , поэтому вам не нужно его импортировать.

это: :styles="$tooltipStyles" должно получить ваше значение

 const app = Vue.createApp({})

app.component('my-component', {
  template: '<h1 :style="$tooltipStyles">My Component {{$tooltipStyles}}</h1>',
})

app.config.globalProperties.$tooltipStyles= 'color: green;'
app.mount('#app')

 <script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>
<div id="app">
  <my-component></my-component>
</div>

Ответ №2:

Вы могли бы попробовать с prototypes

 import Vue from 'vue'

Vue.prototype.$tooltipStyles = {
   width: '300px',
   minWidth: 'unset'
}

Для получения дополнительной информации: добавление свойств экземпляра

С установленным Vue:

otherFile.js

 mounted() {
  console.log(this.$tooltipStyles)
}