Welche Werkzeuge werden verwendet, um den globalen Zustand in Vue.js zu speichern? Was ist der Unterschied zwischen Options API und Composition API in Pinia?

Для хранения глобального состояния во 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 проще для новичков и более привычен.