Поддерживает ли это Composition API?

Да. Вы можете переключаться между синтаксисом 'Option Store' и 'Setup Store', который использует тот же паттерн, что и Vue 3 Composition API.

Поддерживается ли TypeScript?

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

Как мне использовать сгенерированный store?

После копирования кода в ваш проект вы можете импортировать функцию `useStore` и вызвать ее внутри хука `setup` вашего компонента или блока ` `.

Хранится ли мой код на вашем сервере?

Нет. Определяемая вами структура store полностью остается в среде вашего браузера. Никакие данные кода или архитектуры никогда не передаются и не сохраняются извне.

Форматтеры и код

Генератор Vue 3 + Pinia Store

Typed Pinia stores with state, getters and actions.

Runs in your browser

Store name (camelCase)State (comma-separated key: default)Actions (comma-separated)

stores/user.ts

import { defineStore } from "pinia";
import { ref, computed } from "vue";

export const useUserStore = defineStore("user", () => {
  // state
  const id = ref('');
  const email = ref('');
  const isAuthed = ref(false);

  // actions
  async function login() {
    // TODO implement login
  }
  async function logout() {
    // TODO implement logout
  }

  return {
    id,
    email,
    isAuthed,
    login,
    logout,
  };
});

lines: 26chars: 431size: 431 B

live

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

Understanding · State, derived state, mutations — one defineStore call.

Эта углублённая глава пока доступна только на английском языке. Инструмент конвертации выше работает на вашем языке; развёрнутая статья ещё не переведена.

Часто задаваемые вопросы

Quick answers.

›Does this support the Composition API?

Yes. You can toggle between the 'Option Store' syntax and the 'Setup Store' syntax, which uses the same pattern as the Vue 3 Composition API.

›Is TypeScript supported?

Yes. The generator produces fully typed TypeScript code by default, ensuring your state and actions benefit from autocompletion and type checking.

›How do I use the generated store?

After copying the code into your project, you can import the `useStore` function and call it inside your component's `setup` hook or `<script setup>` block.

›Is my code data stored on your server?

No. The store structure you define remains entirely within your browser environment. No code or architectural data is ever transmitted or saved externally.

Люди также ищут

Связанные инструменты

More in this room.

Смотреть все в Форматтеры и код