Vue3. Как изменить глобальную переменную?

В Vue.js, начиная с версии 3, глобальных переменных больше нет. Vue 3 предлагает новую архитектуру, называемую "composition API", которая заменяет "опции" в Vue 2. Ранее в Vue 2, глобальные переменные часто создавались с использованием объекта Vue.prototype или с помощью плагинов Vue. Но в Vue 3, глобальные переменные рекомендуется хранить вне экземпляра Vue.

Вместо этого, в Vue 3, можно использовать другой подход, называемый provide и inject. provide позволяет предоставить значение или функцию для отображения в дочерних компонентах, а inject позволяет получить эти значения или функции в дочерних компонентах.

Для изменения глобальной переменной в Vue 3, сначала создайте новый файл, называемый global.js, или любое другое имя, которое вам нравится, и определите в нем вашу глобальную переменную:

// global.js
import { reactive } from 'vue'

export const globalState = reactive({
  variable: 'default value'
})

Затем, в вашем главном файле (обычно это main.js или app.js), импортируйте globalState и зарегистрируйте его в приложении:

// main.js or app.js
import { createApp } from 'vue'
import { globalState } from './global.js'
import App from './App.vue'

const app = createApp(App)

app.provide('globalState', globalState)

app.mount('#app')

Теперь, в любом компоненте вашего приложения, вы можете получить доступ к глобальной переменной, используя inject:

import { inject } from 'vue'

export default {
  setup() {
    const globalState = inject('globalState')

    function changeGlobalVariable(newValue) {
      globalState.variable = newValue
    }

    return {
      globalState,
      changeGlobalVariable
    }
  }
}

В этом примере мы используем inject для получения доступа к глобальной переменной globalState из файла global.js. Когда вызывается функция changeGlobalVariable, она изменяет значение глобальной переменной на новое значение.

Таким образом, в Vue 3 мы больше не работаем с глобальными переменными напрямую, а вместо этого используем provide и inject, чтобы делиться значениями или функциями между компонентами. Это делает код более модульным и позволяет более гибко управлять глобальным состоянием в приложении.