The element 'commit' cannot be found within the property

Question

The element 'commit' cannot be found within the property

I am facing an issue when transitioning from using Vuex in JavaScript to TypeScript. The error message Property 'commit' does not exist appears in Vuex's mutations:

const mutations = {
  methodA (): none {
    this.commit('methodB') // raise error here!!! <- Property 'commit' does not exist on type '...'
  },
  methodB (): nont {
    log.console('hello')
  }
}

Any suggestions on how to resolve this problem?

EDIT:

Still waiting... www

EDIT:

Below is a snippet of the entire file, which may be lengthy (200 lines):

import fs from 'fs'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'

import { remote } from 'electron'

// Rest of the code...

Additional information: This project utilizes electron, and I am attempting to convert it into a TypeScript file. The specific file in question is a Vue store file located at ./src/store/modules/todolist.vue.

typescript vue.js vuex

Answer 1

Answer №1

One important rule in Vuex is to avoid committing a mutation from within another mutation. Mutations should only directly modify the state to maintain a clear track of changes over time.

If you need to add logic around mutation calls, it's best to use an action instead. Actions come with a context object containing the 'commit' method.

For example, you can create an action that sequentially commits 'methodA' followed by 'methodB' like this:

const actions = {
  actionOne ({commit}): none {
    commit('methodA')
    commit('methodB')
  },
}

If you have more complex logic, such as conditionally committing mutations, you can include it within your action.

Answer 2

One important rule in Vuex is to avoid committing a mutation from within another mutation. Mutations should only directly modify the state to maintain a clear track of changes over time.

If you need to add logic around mutation calls, it's best to use an action instead. Actions come with a context object containing the 'commit' method.

For example, you can create an action that sequentially commits 'methodA' followed by 'methodB' like this:

const actions = {
  actionOne ({commit}): none {
    commit('methodA')
    commit('methodB')
  },
}

If you have more complex logic, such as conditionally committing mutations, you can include it within your action.

The element 'commit' cannot be found within the property

Answer №1

Similar questions

Problem with Vue app deployment in a subdirectory arises when the route changes from the specified publicPath

Conditional generic type in return type with Typescript

Learn the step-by-step process of clicking on a button to modify its properties and deactivate it

The ListItemButton's onclick event does not trigger on the initial click when utilizing a custom component as its children

Encountering a "undefined response" issue within an Angular

In Angular 12, encountering the error "Unable to bind to 'formGroup' as it is not a recognized property of 'form'" is not uncommon

Creating a generic component map resolver for flexible applications

Is there a way to obtain the component code prior to compiling in Vue2.x?

What is the best way to display a Nested JSON structure without an object key?

Angular: Implementing default nested routes

Modifying the value of a property in one model will also result in the modification of the same

When working with Vuex, remember to only alter the store state within mutations. Avoid mutating the Vuex

I am experiencing issues with my Angular2 project where not all of my component variables are being passed to the

Leverage webpack to dynamically import a specific file depending on the node environment

Angular messaging service error TS2769: There is no overload that fits this call

Each time I invoke the setInterval function, my counter speeds up - using vuejs

Next.js Error: Inconsistent text content between server-rendered HTML and hydration. Unicode characters U+202F versus U+0020

Issue with MUI 5 Button component not receiving all necessary props

Updating the font color of rows using Vue.js and Vuetify

Utilizing a computed property for conditional class binding in Vue 2