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

Using Vuejs to implement pagination on a weekly basis

Vue.js behaving abnormally due to certain circumstances

establishing the default value as p-multiselect

I'm having trouble launching the Vue UI after successfully installing the Vue CLI - any ideas why?

Validating dates in TypeScript

The error code TS2345 indicates that the argument type 'Event' cannot be assigned to a parameter type 'string'

Is there a way to connect a Button to a different page in VUE.JS?

Tips for extracting IDs from multiple checkboxes that have been selected upon submission in an Ionic 2+/Angular 2+ environment

Error message: Injector Error: R3InjectorError(Standalone[_AppComponent])[_WebService -> _WebService -> _WebService] occurred

My initial experience with vue.js has been complicated by issues with routers

Step-by-step guide on populating an array with variables in Vue.Js for creating a bar chart

Utilize apexcharts to apply custom colors for negative data points

Sharing WebSocket connection among Vue componentsSharing a WebSocket connection among multiple Vue components

Create a simulated reload of the window location using sinon

Hiding and displaying DIVs on a single HTML page using VueJs 2

How can a secondary property type be determined by the key utilized in another property?

What could be causing the error within the 'react-code-blocks' library?

What is the procedure to delete one file out of three files that have been uploaded using Vuetify?

Can I apply zebra striping to specific columns in a b-table?

Errors in Vue.js console appearing after modifying hostname in configuration file