Vuex:使用Action与在组件内处理之间的区别？
Vuex:使用Action与在组件内处理之间的区别？
提问于 2021-03-02 11:02:11
我搞不懂为什么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
Get Data
methods: {
clearOverlay() {
this.$store.dispatch('clearOverlay', {
url: '/api/clear-overlay',
})
}
}像这样只在组件中做有什么不同呢？
选项2
Get Data
methods: {
clearOverlay() {
axios.get('api/clear-overlay')
.then(resp => {
this.$store.commit('setOverlayText', response);
})
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-02 11:34:28
您给出的示例略有不同，因为在选项1中，唯一可能的值将存储在
是来自
..。但在选项2中，您可以在提交突变时传递任意文本，该值将存储在
..。
更广泛地说，有一些重要的区别。
突变
必须是同步的，并且
动作
可以是异步的。您还可以通过发送单个操作来触发多个突变(想象一下，如果您经常需要调用相同的三个突变)。这两个功能可以帮助保持您的组件良好和精简，同时集中更多的Store逻辑。
The The The
调度操作
操作文档的一节有助于说明这些点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66432693
复制相关文章
相似问题
腾讯云开发者
