Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中

简介: Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中

我是这样认为的,首先,你要考虑清楚这个异步请求你要是 全局公用呢还是 单个组件私有呢?

如果是公用,还是写在 vuex 的actions 当中为妙,而私有 则 写在methods中。

实际上我是这样做的,公有数据 state ,而私有方法。

意思就是直接 不用 actions, 请求全部放在 组件methods 当中,更新数据的话也不通过 actions 这一环节,直接通过method 调用 mutation。 这样就可以把vuex 分为三个部分, state,setter,getter, 风别是 数据,写操作,读操作。 这样的话 我觉得逻辑清楚一点。

而如果把 method 写到 actions 中,第一个,在写组件的时候不是太方便,使得 vue组件严重依赖 store。再一个,写着太麻烦,例如,我就随便改一个数据的值,而我又不想使用mapActions 将所有方法写到store中,那我就得先调用 …mapAction,然后通过action 将数据提交到 mutation,再通过 mutation 来改state,流程是在是太长了。而省略掉 action后,只需要在方法中 …mapMutation 就直接改好 state,方便快捷。

而且到目前为止,我还没有发现那个方法需要写进 actions 呢,全局只要 数据 流通就够了。


相关文章
|
22天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
75 7
|
10天前
|
XML 前端开发 JavaScript
|
4天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
4天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
9天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
21天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
43 18
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
163 4
|
27天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
13天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
41 1
|
16天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。