Динамические параметры

Quasar Framework предоставляет мощные средства для создания интерактивных пользовательских интерфейсов на базе Vue.js. Одной из ключевых особенностей при разработке приложений является работа с динамическими параметрами, которые позволяют изменять поведение компонентов и страниц в зависимости от состояния приложения или входных данных.

Работа с параметрами маршрутов

Quasar использует Vue Router для маршрутизации. Динамические параметры задаются через двойные двоеточия (:) в определении пути:

const routes = [
  {
    path: '/user/:id',
    component: () => import('pages/UserPage.vue')
  }
]

В этом примере :id — динамический параметр маршрута. Для доступа к значению параметра внутри компонента используется объект this.$route.params:

export default {
  mounted () {
    console.log(this.$route.params.id)
  }
}

Для реактивного отслеживания изменений параметра маршрута применяются наблюдатели Vue:

watch: {
  '$route.params.id'(newId) {
    this.fetchUserData(newId)
  }
}

Это обеспечивает обновление данных компонента при изменении параметров маршрута без необходимости перезагрузки страницы.

Передача параметров через свойства компонентов

Компоненты Quasar могут принимать props, что позволяет делать их гибкими и многоразовыми:

<q-card :title="cardTitle">
  <p>{{ content }}</p>
</q-card>

<script>
export default {
  props: {
    cardTitle: String,
    content: String
  }
}
</script>

Props могут быть динамическими, если привязаны к реактивным данным родительского компонента:

<q-card :title="user.name" :content="user.description"></q-card>

Изменение объекта user автоматически обновит отображение на карточке.

Параметры компонентов Quasar и реактивность

Quasar компоненты поддерживают динамическое управление атрибутами и состоянием. Например, для компонента q-dialog можно задать реактивное свойство v-model:

<q-dialog v-model="isDialogOpen">
  <q-card>
    <q-card-section>
      Подтвердите действие
    </q-card-section>
    <q-card-actions>
      <q-btn label="Закрыть" @click="isDialogOpen = false" />
    </q-card-actions>
  </q-card>
</q-dialog>

<script>
export default {
  data() {
    return {
      isDialogOpen: false
    }
  }
}
</script>

Здесь isDialogOpen является динамическим параметром, который контролирует видимость диалога. Любое изменение состояния автоматически обновляет интерфейс.

Использование query-параметров

Query-параметры URL позволяют передавать динамические данные, не влияя на структуру маршрута:

this.$router.push({ path: '/search', query: { q: 'Quasar', page: 2 } })

В компоненте доступ к параметрам осуществляется через this.$route.query:

mounted() {
  console.log(this.$route.query.q) // 'Quasar'
  console.log(this.$route.query.page) // '2'
}

Query-параметры полезны для фильтров, пагинации и поиска, где параметры часто изменяются без навигации по новым страницам.

Динамическая генерация компонентов

Quasar поддерживает динамическое создание компонентов через v-for и условный рендеринг:

<q-btn
  v-for="action in actions"
  :key="action.name"
  :label="action.label"
  @click="performAction(action.name)"
></q-btn>

<script>
export default {
  data() {
    return {
      actions: [
        { name: 'save', label: 'Сохранить' },
        { name: 'delete', label: 'Удалить' },
        { name: 'edit', label: 'Редактировать' }
      ]
    }
  },
  methods: {
    performAction(name) {
      console.log(`Выполняется действие: ${name}`)
    }
  }
}
</script>

Каждая кнопка получает динамические параметры, которые определяются массивом actions. Это позволяет расширять и модифицировать интерфейс без изменения структуры разметки.

Динамическая настройка тем и стилей

Quasar предоставляет возможность изменять визуальные параметры на лету через динамические CSS-классы и переменные:

<q-card :class="cardClass">
  <q-card-section>
    Динамическая карточка
  </q-card-section>
</q-card>

<script>
export default {
  data() {
    return {
      isHighlighted: true
    }
  },
  computed: {
    cardClass() {
      return this.isHighlighted ? 'bg-primary text-white' : 'bg-grey-2 text-black'
    }
  }
}
</script>

Такой подход позволяет менять оформление компонентов в зависимости от состояния данных или действий пользователя, создавая адаптивный интерфейс без перезагрузки страницы.

Интеграция с Vuex и Pinia

Динамические параметры могут поступать из централизованного хранилища состояния. При использовании Pinia или Vuex свойства и методы компонентов Quasar могут связываться с состоянием хранилища:

<q-badge :label="cart.items.length"></q-badge>

<script>
import { useCartStore } from 'stores/cart'

export default {
  setup() {
    const cart = useCartStore()
    return { cart }
  }
}
</script>

Изменение состояния cart.items автоматически обновляет интерфейс благодаря реактивности Vue.

Практические рекомендации

  • Использовать динамические параметры для маршрутов и компонентов только там, где это необходимо, чтобы избежать избыточной сложной логики.
  • Сохранять параметры состояния в хранилище при необходимости синхронизации между компонентами.
  • Применять watch и вычисляемые свойства для автоматического реагирования на изменения параметров.
  • Использовать v-for и динамические props для генерации интерфейса на основе массива данных, чтобы минимизировать дублирование кода.

Динамические параметры в Quasar обеспечивают гибкость разработки и позволяют создавать интерактивные, адаптивные приложения, где элементы интерфейса реагируют на изменения данных, маршрутов и состояния в реальном времени.

Оглавление