1

我很困惑为什么 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);
        });
    },
}

如果我想使用 Vuex Action 进行 API 调用并基于它更改数据，如下所示：

选项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);
        })
    }
}
4

1 回答 1

1

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

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

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

于 2021-03-02T03:34:28.133 回答