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

Какие инструменты используются для хранения глобального состояния во Vue.js? В чём разница между Options API и Composition API в Pinia?