Как использовать Reactive функцию в Vue 3 cdn

Question

Хотел использовать функцию reactive из Vue 3 , но почему-то мне выдает ошибку Uncaught ReferenceError: reactive is not defined хотя VUE 3 точно подключен через CDN. Может эта функция reactive не работает через CDN? Вот ссылка источника откуда я это взял https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api

Мне нужен был доступ к методам и переменным из разных компонентов(типо глобальный доступ). И я хотел использовать эту функцию reactive как посредника между компонентами для обмена данными.

Answer 1

Подключаете Vue:

<script src="https://unpkg.com/vue@next"></script>

Подключаете необходимый функционал:

const {
      reactive,
      createApp
    } = Vue;

Создаете данные(переменные и методы), которые хотите сделать доступными в нескольких компонентах:

const store = reactive({
      count: 0,
      increment() {
        this.count++
      },
    });

Воспользовавшись возможностями Composition API подключаете данные и методы в те компоненты, где хотите их использовать:

setup() {
        return {
          store,
        }
      },

Как-то так)

Пример для наглядности:

const {
  reactive,
  createApp
} = Vue;

const store = reactive({
  count: 0,
  increment() {
    this.count++
  },
});

const app = createApp({
  setup() {
    return {
      store,
    }
  }
})


const component1 = {
  setup() {
    return {
      store,
    }
  },
  template: `
    <fieldset>
   <legend>Component 1</legend>
   <pre>count = {{ store.count }}</pre>
   <component2></component2>
   </fieldset>
  `
}
app.component('component1', component1)

const component2 = {
  setup() {
    return {
      store,
    }
  },
  template: `
    <fieldset>
   <legend>Component 2</legend>
   <pre>count = {{ store.count }}</pre>
   <button @click="store.increment()">
    increment
   </button>
   </fieldset>
  `
}
app.component('component2', component2)


app.mount('#app');

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <fieldset>
    <legend>App</legend>
    <pre>count = {{ store.count }}</pre>
    <button @click="store.increment()">
    increment
   </button>
    <component1></component1>
  </fieldset>
</div>

БЛОГ НА HUSL

Как использовать Reactive функцию в Vue 3 cdn

Ответы (1 шт):