Vuex：使用 Action 与在组件内处理之间的区别？

Question

我很困惑为什么 Vuex 中的动作不能只在一个组件中处理。
假设我有一个基本商店：

store.js

const initialState = () => ({
    overlayText: ''
}) 

const mutations = {
    setOverlayText: (state, payload) => {
        state.overlayText = payload;
    },
}

const actions = {   
    clearOverlay: (context, data) => {
        return axios.get(data.url).then((response) => {
            context.commit('setOverlayText', response);
        });
    },
}

如果我想进行 API 调用并根据它更改数据，如下所示使用 Vuex 操作：

选项 1

<button @click="dispatchClearOverlay">Get Data</button>

methods: {
    clearOverlay() {
        this.$store.dispatch('clearOverlay', {
            url: '/api/clear-overlay',
        })
    }
}

像这样只在组件中做有什么区别？

选项 2

<button @click="clearOverlay">Get Data</button>

methods: {
    clearOverlay() {
        axios.get('api/clear-overlay')
        .then(resp => {
            this.$store.commit('setOverlayText', response);
        })
    }
}

Answer 1

您提供的示例与选项 1 中的示例略有不同，将存储在 state.overlayText 中的唯一可能值是来自 /api/clear-overlay 的响应。但是在选项 2 中，您可以在提交更改时传递任意文本，并且该值将存储在 state.overlayText.

中

更一般地说，存在一些重要差异。 Mutations 必须是同步的，Actions 可以是异步的。您还可以通过分派单个操作来触发多个突变（想象一下，如果您经常需要调用相同的三个突变）。这两个功能可以帮助您保持组件的美观和精简，同时集中更多的商店逻辑。

操作文档的 Dispatching Actions 部分有助于说明这些要点。

Vuex：使用 Action 与在组件内处理之间的区别？

Vuex: Difference between using an Action vs. handling within component?

vue.js

vuex

vuejs2