Как в Vue 3 корректно работать с pinia в не компонента?

Для того чтобы корректно работать с Pinia в Vue 3 вне компонентов, вам потребуется создать инстанс Pinia и использовать его в своих модулях (store, service и т.д.).

Во-первых, установите pinia пакет:

npm install pinia

Затем в вашем файле, где вы хотите использовать Pinia, создайте и экспортируйте экземпляр Pinia:

import { createPinia } from 'pinia';

export const pinia = createPinia();

Теперь вы можете использовать этот экземпляр Pinia в ваших модулях, чтобы создать хранилища, сервисы и т.д.

Например, создадим простой хранилище:

import { pinia } from './pinia';

export const counterStore = pinia.store({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

А теперь давайте использовать хранилище и вызывать его методы вне компонента:

import { counterStore } from './stores/counterStore';

// Создаем инстанс хранилища
const store = counterStore();

store.increment(); // Увеличиваем счетчик на 1
console.log(store.count); // Выведет 1

store.decrement(); // Уменьшаем счетчик на 1
console.log(store.count); // Выведет 0

Вы также можете использовать декоратор @pinia для автоматического создания инстансов хранилищ и закрепления их к указанному экземпляру Pinia:

import { pinia } from './pinia';

class MyService {
  @pinia.store('counter') counterStore;

  increment() {
    this.counterStore.increment();
  }

  decrement() {
    this.counterStore.decrement();
  }
}

const service = new MyService();

service.increment();
console.log(service.counterStore.count); // Выведет 1

service.decrement();
console.log(service.counterStore.count); // Выведет 0

Таким образом, вы можете использовать Pinia вне компонентов в Vue 3 для управления состоянием и выполнения действий в ваших приложениях.