Ondersteunt dit de Composition API?

Ja. U kunt schakelen tussen de 'Option Store'-syntaxis en de 'Setup Store'-syntaxis, die hetzelfde patroon gebruikt als de Vue 3 Composition API.

Wordt TypeScript ondersteund?

Ja. De generator produceert standaard volledig getypeerde TypeScript-code, zodat uw status en acties profiteren van autocompletion en typecontrole.

Hoe gebruik ik de gegenereerde store?

Nadat u de code in uw project heeft gekopieerd, kunt u de `useStore` functie importeren en aanroepen binnen de `setup` hook of het ` ` blok van uw component.

Worden mijn codegegevens op uw server opgeslagen?

Nee. De store-structuur die u definieert, blijft volledig binnen uw browseromgeving. Er worden geen code of architectonische gegevens extern verzonden of opgeslagen.

Formatters & Code

Vue 3 + Pinia Store Generator

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

Redactionele opmerking

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

Dit uitgebreide hoofdstuk is momenteel alleen in het Engels beschikbaar. De conversietool hierboven werkt in jouw taal; de lange uitleg is nog niet vertaald.

Veelgestelde vragen

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.

Mensen zoeken ook naar

Gerelateerde tools

More in this room.

Bekijk alles in Formatters & Code