Как использовать data и реактивность в Nuxt 3?

В Nuxt 3, которая является следующей мажорной версией фреймворка Nuxt.js, произошли изменения в использовании data и реактивности. Обычно, в Nuxt.js мы используем Vue.js для создания интерактивных пользовательских интерфейсов, и, следовательно, понимание того, как использовать data и реактивность в Nuxt 3 является важным.

В Nuxt 3, основным способом работы с данными является использование Composition API вместо Options API. Composition API предоставляет более гибкий и эффективный подход к работе с данными, чем Options API.

Чтобы начать использовать Composition API в Nuxt 3, вам необходимо создать файл .vue с компонентом и использовать следующий шаблон:

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="inputData" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello, World!')
const inputData = ref('')

// Можно создать функции, которые изменяют состояние данных
function updateMessage() {
  message.value = 'Updated message'
}

</script>

В приведенном выше примере мы используем функцию ref из vue для создания реактивного значения. Значения, возвращаемые функцией ref, можно привязывать к шаблону с помощью директивы v-model.

Также в примере есть функция updateMessage, которая изменяет значение message при вызове.

В Nuxt 3 также есть возможность использовать встроенный в Nuxt.js модуль @nuxt/composition-api для упрощенной работы с реактивностью. Для его использования вам необходимо установить модуль с помощью npm или yarn:

npm install @nuxt/composition-api

После установки модуля вам необходимо добавить его в файл nuxt.config.js:

// nuxt.config.js
export default {
  modules: ['@nuxt/composition-api']
}

После добавления модуля вы сможете использовать ref и другие функции Composition API без импорта:

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="inputData" />
  </div>
</template>

<script>
export default {
  setup() {
    const message = ref('Hello, World!')
    const inputData = ref('')

    function updateMessage() {
      message.value = 'Updated message'
    }

    return {
      message,
      inputData,
      updateMessage
    }
  }
}
</script>

Вышеприведенные примеры демонстрируют основы использования data и реактивности в Nuxt 3 с использованием Composition API. Вы можете дополнить и настроить их в соответствии с вашими потребностями и требованиями проекта.