从组件脚本区调用 mapActions 方法

Question

我知道我可以从组件的模板中调用 mapActions 方法，只需输入函数名称即可。但是如何从组件的脚本标记内部调用 mapActions 方法。

axios.put('api/presenter/'+presenterId, presenter).then(function(res) {
                if(res.data !== true) {
                    // something went wrong
                    console.error(res.data)
                } else {
                    // here I want to call the mapActions method
                    callMethodHere(res.data)
                    alert('edited') // replace later
                }
          }).catch(function(err) {
              console.error(err)
          })

但是 callMethodHere 将是未定义的..

我的 vuex 文件

addSpeaker(state, speaker) {
    state.allSpeaker = [...state.allSpeaker, speaker]
}

addSpeaker({commit}, speaker) {
    commit('addSpeaker', speaker)
}

这是我调用 vue 存储的组件属性:

<ul>
        <li v-for="presenter in allSpeaker" :key="presenter.id">
            {{presenter.name}} <button type="button" class="btn btn-primary" @click="edit(presenter.id)">Edit</button>
        </li>
    </ul>

computed: {
        ...mapState({
            allSpeaker: state => state.allSpeaker
        })
    },

Answer 1

将 then 回调定义为箭头函数，以便能够访问 this（组件实例），然后使用 this.callMethodHere(res.data) 调用该方法：

axios.put('api/presenter/'+presenterId, presenter).then((res)=> {
                if(res.data !== true) {
                    // something went wrong
                    console.error(res.data)
                } else {
                    
                    this.callMethodHere(res.data)
                    alert('edited') // replace later
                }
          }).catch(function(err) {
              console.error(err)
          })

从组件脚本区调用 mapActions 方法

Call mapActions method from components script area

vue.js

vuex