Error TS2322: The function signature '(state: State, exRep: number, exName: string) => void' does not match the expected type 'Mutation' in Vuex when using TypeScript

I'm currently facing an issue while working with Vuex and TypeScript. I have encountered the following error in my code, but I am unsure how to resolve it: The error :

TS2322: Type '(state: State, exRep: number, exName: string) => void' is not assignable to type 'Mutation '

Here is a snippet of my code :

import { createStore } from "vuex";
import {State} from "./Types";

const store = createStore<State>({
    state() {
        return {

            exercices: []

        }
    },
    mutations: {
        addEx(state: State, exRep: number, exName: string) {
            const exId = checkid()
            state.exercices.push({ "rep": exRep, "name": exName, "id": exId })
        },
        removeEx(state: State, exoId: Number) {
            console.log(exoId)
            state.exercices = state.exercices.filter(obj => obj.id !== exoId)
        }
    }
})
export default store

The error specifically occurs at the "addEx" mutation.

Answer №1

In order to maintain practicality, mutation functions are designed to have only 2 parameters and cannot be variadic. The second parameter serves as an optional payload, and if there are multiple parameters required, they should be passed in as an object:

addEx(state: State, { exRep, exName }: { exRep: number, exName: string }) {
  ...

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

Errors related to reducer types in createSlice of Redux Toolkit

As I embark on a new React-Redux project with Typescript, I find myself facing some challenges despite my previous experience. While my knowledge of React and Redux is solid, I am still getting acquainted with Redux toolkit. Transitioning from a typed back ...

Using Vue3 and Vite: Is it possible to automatically convert Vue scoped styles from data-v attributes to hashed class names?

Could the scoped style in Vue.js transform to hashed classnames instead of using data-v attributes like this: <template> <div class="example">123abc</div> </template> <style scoped> .example { color: red; } </s ...

405 error: NGINX blocking POST method in Django DRF Vue.js application

I have encountered a strange issue while building my ecommerce site. Everything seems to be working fine, except for the forms. When attempting to post content, I keep receiving a 405 method get not allowed error. It's confusing as I am trying to use ...

What is the best way to transpile when using vue-cli-service to build a library?

Currently, I am in the process of creating a library primarily consisting of .vue components for reusability across various projects (not intended for public npm use) using vue-cli-service. Everything appears to be set up correctly, and I can confirm that ...

How can I turn off eslint validation in my Vue project?

I have a question about my configuration in vue.config.js. I've tried setting it as follows: module.exports = { lintOnSave: false } However, the changes don't seem to take effect. Can anyone provide guidance on how to disable eslint validati ...

Refine the search results by focusing on a specific property value

Assume I have a type defined as follows: type Result = {error:true,response: undefined} | {error:undefined, response:{nick:string}} This type will either contain an error property or a response, but not both. Now, I am attempting to create a function tha ...

Leveraging VueJS: Communicating between components via event bus

Currently, I am utilizing VueJS and aiming to activate a method within a .Vue component using the eventbus. The eventbus is functioning properly, and I followed the instructions provided in this informative article: https://example.com/vuejs/event-handling ...

Ways to access nested keys in a TypeScript object as well as an array containing objects

As I develop a form generator, my goal is to achieve type safety for a nested object and an array of objects. Specifically, I want the 'name' property to correspond to the key of the respective object it belongs to. For instance, in the scenario ...

Exploring methods for interacting with and controlling structural directives in e2e testing

Background: My goal is to permutation all potential configurations of an Angular2 screen for a specified route and capture screenshots using Protractor from the following link: http://www.protractortest.org/#/debugging. Problem: I am struggling to figure ...

Set the rowspan to 2 when the v-for index does not equal 2

This is the table I am working with: <table class="table table-condensed table-sm table-striped table-bordered" id="list"> <thead> <tr> <th v-for="(column, index) in columns" :key=& ...

Understanding Different Symbols in TypeScript

Can you explain the purpose of symbols in TypeScript to me? As someone familiar with Java, it seems a bit unnecessary to use them alongside an interface declaration. What is the reason for setting symbols in TypeScript? For example, consider the followin ...

Satisfy TypeScript by accommodating both array and non-array values within a single variable

I am looking to implement an array of Payments for each Rent instance, but I also want the flexibility to pass either a single Payment object or an array of Payment objects through the constructor... However, the issue arises when I try to assign this.pay ...

Add a class to a button in an Angular btn-group if a specific string is found within an

I am currently working on a project where I have multiple buttons that need to toggle an active class when selected in order to change their color. Below is a snippet of what I have: In the array called 'selected', I have: this.selected = [&ap ...

Utilize the provider within the decorator function

Essentially, the challenge I am facing is passing an authService to the "verifyClient" function within the @WebSocketGateway decorator. Here is how it should look: @WebSocketGateway({ transports: ['websocket'], verifyClient: (info: { req: Inc ...

The property 'innerHTML' cannot be assigned to null, as stated in Vue

I am dealing with two components that allow for editing JSON objects. Additionally, I have a button that toggles between these two components. Below is the HTML code snippet: <v-btn @click="switchConfigClicked">Switch config</v-btn> <h4 cla ...

Encountering a 404 error with Laravel InertiaJS Vue after deployment on Hostinger

After uploading my project to Hostinger, I encountered an issue where only the homepage of the website was showing. Other components were resulting in errors like: GET https://appname.com/shop/all 404 (Not Found) vendor-5ByMKR7B.js:3. To troubleshoot, I at ...

The TypeScript/Webpack build for the Backend API server encountered an error: Module not found - Error: Unable to resolve

I am encountering a series of errors while trying to build my TypeScript application. I suspect that they are related to Webpack, but I am struggling to find a solution... ERROR in ./~/errorhandler/index.js Module not found: Error: Can't resolve &apo ...

Implementing basic authentication with AWS Lambda and Application Load Balancer

A few days ago, I sought assistance on implementing basic-authentication with AWS Lambda without a custom authorizer on Stack Overflow. After receiving an adequate solution and successfully incorporating the custom authorizer, I am faced with a similar cha ...

Trouble with references in Vue TypeScript when trying to access child component methods

I'm encountering an issue with calling a function in a child component while using typescript <notification ref="notification"></notification> <button @click="$refs.notification.show()"></button> Is there a ...

The data type 'StaticImageData' cannot be converted to type 'string'

I've hit a roadblock with interfaces while working on my NextJS and TypeScript project. I thought I had everything figured out, but I'm encountering an issue with the src prop in my Header component. The error messages I keep receiving are: Typ ...