รองรับ Composition API หรือไม่?

ใช่ คุณสามารถสลับระหว่างไวยากรณ์ 'Option Store' และไวยากรณ์ 'Setup Store' ซึ่งใช้รูปแบบเดียวกับ Vue 3 Composition API ได้

รองรับ TypeScript หรือไม่?

ใช่ ตัวสร้างจะสร้างโค้ด TypeScript ที่มี type สมบูรณ์ตามค่าเริ่มต้น ทำให้มั่นใจได้ว่าสถานะและการดำเนินการของคุณจะได้รับประโยชน์จากการเติมข้อความอัตโนมัติและการตรวจสอบประเภท

ฉันจะใช้ Store ที่สร้างขึ้นได้อย่างไร?

หลังจากคัดลอกโค้ดเข้าสู่โปรเจกต์ของคุณ คุณสามารถนำเข้าฟังก์ชัน `useStore` และเรียกใช้ภายใน `setup` hook ของคอมโพเนนต์ของคุณ หรือบล็อก ` `

ข้อมูลโค้ดของฉันถูกเก็บไว้ในเซิร์ฟเวอร์ของคุณหรือไม่?

ไม่ โครงสร้าง 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.

ดูทั้งหมดใน ตัวจัดรูปแบบและโค้ด