Set up a Pinia store with a specific data type

Note: I am a beginner in JavaScript

I am currently working on synchronizing an object with a Pinia store and a Python REST API. My goal is to define a type just once without having to duplicate it in the store.

export const useTicketStore = defineStore('ticket', {
  state: () => ({
    id: null,
    status: "",
    subject: "",
    email: "",
    department: null,
    ticketType: nulll,
  }),
  actions: {
    save() {
      const action = this.id ? axios.patch : axios.post
      const url = this.id ? `/api/tickets/${this.id}` : "/api/tickets"
      action(url, this).then((response) => {
        this.$patch(response.data)
      })
    }
  }
})

Consistency is key throughout my application:

interface Ticket {
    id: number | null,
    status: string,
    subject: string,
    email: string,
    department: number | null,
    ticketType: number | null,
}

My ideal scenario would be something like this

export const useTicketStore = defineStore('ticket', {
  state: () => ({
    ...Ticket
  }),
  actions: {
...
})

However, attempting to implement the above code snippet leads to a peculiar error:

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

Answer №1

If you are encountering an error message indicating that the file you are trying to import Ticket from does not have a default export, then you need to import it like this:

import {Ticket} from '...'; // with curly brackets

In terms of what you are trying to achieve, keep in mind that the function is returning an object with key-value pairs. The type may be Ticket, but you cannot replace it directly with Ticket because Ticket represents a type, not an object. You can still define a return type for the function, but you will still need to specify the values of the returned object:

state: (): Ticket => ({
  id: null,
  status: "",
  subject: "",
  email: "",
  department: null,
  ticketType: null,
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The positioning of CSS arrows using the "top" attribute is not relative to the top of the page when using absolute values

I am currently working on positioning the arrow in the screenshot using TypeScript calculations. However, I am facing an issue where the position is being determined based on the top of the black popup instead of the top of the screen. From the top of the ...

React: State updates are not reflecting in the UI components

I am facing an issue where a function component is not updating visually when the state changes. To illustrate this problem, I have included a simple example of my component in which I update the state but the component does not reflect these changes in t ...

The icons from FontAwesome in Vue do not update when computed

I am seeking a way to dynamically change the header icon based on a conversation property. <a class="navbar-item" :title="$t('header.lock')" @click="makePrivate"> <i class="fas" :class="getLockClass"></i> </a> These ...

Create a conditional statement based on the properties of an object

In one of my Typescript projects, I am faced with the task of constructing a dynamic 'if' statement based on the data received from an object. The number of conditions in this 'if' statement should match the number of properties present ...

Managing a single repository with multiple packages using npm

Currently, I am in the process of developing a node.js application that requires scalability and maintainability. The concept revolves around having a single repository with multiple modules embedded within it. We have opted to utilize local modules with ...

Modifying webpack settings for a create-react-app based project: A step-by-step guide

After starting a new react project with create-react-app, I am looking to update the webpack configuration. However, I cannot seem to locate the webpack file. Should I be creating this file myself, or is there another process involved? As someone who is ...

Modifying the id attribute dynamically using jQuery during runtime

In my project, I have a submit button with the id of "submit" that is used to save new records. // Function to add a new customer record $("#submit").click(function() { var data = $.param($("#form").serializeArray()); ...

What could be causing Next.js middleware to run repeatedly?

Recently, I set up a brand new Next.js project using npx create-next-app@latest --typescript. Upon completing the installation (version 13.3.4), without making any modifications to existing files, I introduced a new file named middleware.ts within the src ...

Error: Kinetic.js cannot upload image to canvas

There must be something simple that I'm missing here. I've checked my code line by line, but for some reason, the image just won't load. var displayImage = function(){ var stage = new Kinetic.Stage("imgarea", 250, 256); var layer = new ...

Having trouble extracting information from JSON object array following an AJAX post?

My website transfers data through JSON objects using Angular's $http post. If you'd like to see the console logs and responses, visit my website: Initially, I used x-form-urlencoded encoding successfully and decided to switch to application/jso ...

Reduce the identification number within a JSON array following the removal of an item

Within my local storage, I maintain a dynamic array. Each entry is accompanied by an ID that increments sequentially. If a user opts to delete an entry, it should be removed from the array while ensuring that the IDs remain in ascending order. For example: ...

What is the best method for ensuring image orientation is displayed correctly?

When utilizing multer node and express for uploading images to my application, I've noticed that some of the images appear rotated 90 degrees once they reach the client side. What could be causing this issue, and how can I resolve it? Just to clarif ...

The basic jQuery script seems to be malfunctioning

I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...

Leveraging PHP for populating JavaScript variables

I am currently working on populating a Drop-Down menu from a csv file stored on a network share. So far, I have successfully managed to populate the options when the file is in the wwwroot folder. However, I am now encountering an issue with referencing a ...

Organizing a Collection of Likes within an AngularJS Service

I have a like button on my profile page that, when clicked, should add the user's like to an array and store it in the database. Within my profile controller, I have the following code: $scope.likeProfile = UserService.likeProfile(loggedInUser,$stat ...

Unexpected glitch: three.js texture turns completely black

I am currently working on a simple geometry box that I want to decorate with a texture. However, the box seems to be invisible or completely black. This issue is related to a previous question that can be found here. Following the answer provided by gaitat ...

Is there any way to deactivate the saved query in react-admin without having to develop a new component?

The latest version of react-admin, version 4, introduced a new feature that allows saving filters. I'm curious about how to disable this functionality without having to create an additional filter button. https://i.stack.imgur.com/uTrUe.gif ...

How can I import an excel spreadsheet using Javascript, or alternatively, convert an excel file to a text document

I have been updating my file upload page to handle both text and excel files. However, when trying to read excel files with my current code, I am getting strange output. It seems that my function, which was originally designed for text files, needs modific ...

PHP - Extract Information from Table Upon Form Submission without User Input

I'm facing a challenge with my web form that includes a table allowing users to delete rows before submitting. Although there are no input fields in the table, I need to capture the data from these rows when the form is submitted. The issue is that th ...

Failure to return an error in the mongoose find function

While attempting to create some statics with Mongoose, I am facing an issue where I cannot access the error argument when using find() or findOne(). Below is my static method: User.statics.authenticate = function(login, password, cb){ return this.mode ...