用类型初始化 Pinia 存储

huangapple go评论126阅读模式
英文:

Initialize Pinia store with a type

问题

免责声明:我是一个JS初学者

我正在使用Pinia存储和Python REST API同步一个对象。我想只声明一次类型,而不必在存储中重复。

  1. export const useTicketStore = defineStore('ticket', {
  2. state: () => ({
  3. id: null,
  4. status: "",
  5. subject: "",
  6. email: "",
  7. department: null,
  8. ticketType: null,
  9. }),
  10. actions: {
  11. save() {
  12. const action = this.id ? axios.patch : axios.post
  13. const url = this.id ? `/api/tickets/${this.id}` : "/api/tickets"
  14. action(url, this).then((response) => {
  15. this.$patch(response.data)
  16. })
  17. }
  18. }
  19. })

在我的应用程序中,我使用了一种类型声明以保持一致性:

  1. interface Ticket {
  2. id: number | null,
  3. status: string,
  4. subject: string,
  5. email: string,
  6. department: number | null,
  7. ticketType: number | null,
  8. }

我想做的是像这样:

  1. export const useTicketStore = defineStore('ticket', {
  2. state: () => ({
  3. ...Ticket
  4. }),
  5. actions: {
  6. ...
  7. })

使用上面的示例会导致奇怪的错误:

Uncaught SyntaxError: 请求的模块'/src/types/ticket.ts'未提供名为'Ticket'的导出项

英文:

Disclaimer: I am an JS beginner

I am synchronizing an object with pinia store and a python REST API. I Want to declare a type only once and not have to mirror it in the store.

  1. export const useTicketStore = defineStore('ticket', {
  2. state: () => ({
  3. id: null,
  4. status: "",
  5. subject: "",
  6. email: "",
  7. department: null,
  8. ticketType: nulll,
  9. }),
  10. actions: {
  11. save() {
  12. const action = this.id ? axios.patch : axios.post
  13. const url = this.id ? `/api/tickets/${this.id}` : "/api/tickets"
  14. action(url, this).then((response) => {
  15. this.$patch(response.data)
  16. })
  17. }
  18. }
  19. })

Throughout my app I use an type declaration for consistancy:

  1. interface Ticket {
  2. id: number | null,
  3. status: string,
  4. subject: string,
  5. email: string,
  6. department: number | null,
  7. ticketType: number | null,
  8. }

What I would like to do is something like this

  1. export const useTicketStore = defineStore('ticket', {
  2. state: () => ({
  3. ...Ticket
  4. }),
  5. actions: {
  6. ...
  7. })

using the example above results in an strange error:

Uncaught SyntaxError: The requested module '/src/types/ticket.ts' does not provide an export named 'Ticket'

答案1

得分: 1

你遇到的错误表明你尝试导入 Ticket 的文件没有默认导出,因此如果你没有定义默认导出,你必须以这种方式导入:

  1. import {Ticket} from '...'; // 带有花括号

关于你想要实现的目标,该函数返回一个对象(键-值对),它可能是 Ticket 类型,但你不能用 Ticket 替代它,因为 Ticket 是一种类型,不是一个对象。<br>
你仍然可以为函数定义返回类型,但这不会避免指定返回对象的值:

  1. state: (): Ticket => ({
  2. id: null,
  3. status: "",
  4. subject: "",
  5. email: "",
  6. department: null,
  7. ticketType: null,
  8. })
英文:

The error you are encoutring tells that the file from where you try to import Ticket does not have a default export so if you didn't define a default export you have to import this way:

  1. import {Ticket} from &#39;...&#39;; // with curly brackets

about what you want to achieve, the function is returning an object (key-value), it may be of type Ticket but you cannot replace it with Ticket because Ticket is a type, not an object. <br>
you still can define a return type for the function, but this will not avoid specifying the values of the returned object:

  1. state: (): Ticket =&gt; ({
  2. id: null,
  3. status: &quot;&quot;,
  4. subject: &quot;&quot;,
  5. email: &quot;&quot;,
  6. department: null,
  7. ticketType: null,
  8. })

huangapple
  • 本文由 发表于 2023年6月15日 23:38:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76483326.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定