javascript - How does vuex call actions on the page?

Question

Page code

methods: {
    ...mapActions(['addList', 'delList']),
    add (value) {
      this.addList({title: value})
    },
    del (item) {
      this.delList(item)
    }
}

Code in actions

import * as types from './mutations'
export const addList = ({commit}, item) => {
  commit(types.ADD_LIST, item)
}    
export const delList = ({commit}, item) => {
  commit(types.DELETE_LIST, item)
}

But the execution will report [vuex] Expects string as the type, but found function. Please let me know what went wrong. Thank you very much.
If you change the above code to the following code, it can be executed.

methods: {
    add (value) {
      this.$store.commit('ADD_LIST', {title: value})
    },
    del (item) {
      this.$store.commit('DELETE_LIST', item)
    }
}

Answer 1

methods: {
    add (value) {
      this.$store.commit('ADD_LIST', {title: value})
    },
    del (item) {
      this.$store.commit('DELETE_LIST', item)
    }
}

Ask me, you said this code can be executed to achieve the effect, then why notthis.$store.commit(types.DELETE_LIST, item)?

You use types in actions.js. Is there something wrong with the mutation-types.jsfile?

Answer 2

export const addList = (commit) => (item) => {
  commit(types.ADD_LIST, item)
} 

I have never used vuex, but if it is similar to Redux, it should be used this way.

Answer 3

I found the answer to the question. Thanks for the reminder upstairs. The actions.js file should be changed to the following

export const addList = ({commit}, item) => {
  commit('ADD_LIST', item)
}    
export const delList = ({commit}, item) => {
  commit('DELETE_LIST', item)
}

Or use the previous writing method, but create a new mutation-types.js file

export const ADD_LIST = 'ADD_LIST'
export const DELETE_LIST = 'DELETE_LIST'

actions.js

import * as types from './mutation-types'
export const addList = ({commit}, item) => {
  commit(types.ADD_LIST, item)
}    
export const delList = ({commit}, item) => {
  commit(types.DELETE_LIST, item)
}