如何从 Vuex/Vuejs 中的动作中调用另一个动作？答案

【问题标题】：How to call another action from actions in Vuex/Vues?如何从 Vuex/Vuejs 中的动作中调用另一个动作？
【发布时间】：2016-12-23 03:29:30
【问题描述】：

在删除其中一个站点后，我正在尝试更新 站点列表，方法是调用如下所示的 getSites() 方法

代码

import http from 'services/http.service';
import logging from 'services/logging.service';

const sites = http('sites', localStorage);

export default {
    getSites({dispatch}) {
        console.log('getSites')
        sites.all().then((response) => {
            dispatch('setSites', response.data.results);
        });
    },
    deleteSite({dispatch}, site) {
        return sites.delete(site).then(() => {
            this.getSites()  // <-------- doesn't works
        });
    },
};

我收到以下错误

删除失败 ReferenceError: getSites is not defined

问题

我应该如何调用获取我的新项目列表？或者我应该在我的组件then() 中执行它吗？

【问题讨论】：

有点晚了，但是用dispatch('getSites') 代替this.getSites() 不行吗？

标签： ecmascript-6 vue.js vuex

【解决方案1】：

我从 actions.js 中删除了调用，并在我的组件方法中进行了调用：

import actions from 'vuex/actions';

export default{
    // …
    methods: {
        // …
        delete_site(site){
            return this.deleteSite(site).then(response => {
                this.getSites();  // <----------- call from here
            });
        },
    vuex: {
        actions: {
            getSites: actions.getSites,
            deleteSite: actions.deleteSite,
        }
    }
}

【讨论】：