这是否支持 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.

查看所有格式化与代码