Senior

Kokius įrankius naudojate globaliai būsenai saugoti Vue.js? Kuo skiriasi Options API ir Composition API Pinia?

sobes.tech AI

Atsakymas iš AI

Для хранения глобального состояния во Vue.js часто используют такие инструменты, как Vuex и Pinia. Vuex был стандартом для Vue 2, а Pinia — более современная и легковесная альтернатива, рекомендованная для Vue 3.

Pinia поддерживает два основных способа определения стора: Options API и Composition API.

Options API в Pinia напоминает синтаксис Vue 2, где состояние, геттеры и действия описываются в виде объектов и методов. Это удобно для тех, кто привык к классическому стилю Vue.
Composition API использует функции и реактивные переменные, что даёт большую гибкость и лучше интегрируется с современным Vue 3. Здесь состояние создаётся через ref или reactive, а функции возвращаются из стора.

Пример Pinia с Composition API:

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
})

Пример Pinia с Options API:

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

Основное отличие — в стиле и подходе к реактивности: Composition API более декларативен и гибок, Options API проще для новичков и более привычен.

Ankstesnis Kitas