Vue.js Vuex：在组件内使用操作与处理之间的区别？

我不明白为什么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操作进行API调用并基于它更改数据，如下所示：

选项1

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

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

获取数据
方法：{
clearOverlay（）{
此.$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);
        })
    }
}

获取数据
方法：{
clearOverlay（）{
axios.get（'api/清除覆盖'）
。然后（resp=>{
这个.store.commit（'setOverlyText'，response）；
})
}
}

您给出的示例与选项1中的示例略有不同，选项1中唯一可能存储在

状态的值。OverlyText

是来自

/api/clear overlay

的响应。但是在选项2中，在提交变异时可以传递任意文本，该值将存储在

状态.overlytext

中

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

---

“操作文档”部分有助于说明这些要点。

很有趣，谢谢！这对我来说已经很清楚了。我只会保持我的组件精简，让商店处理商店逻辑