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 呢,全局只要 数据 流通就够了。


相关文章
|
11天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
9天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
1天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
6 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
1天前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
8 2
|
1天前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
7 1
|
1天前
|
存储 JavaScript 前端开发
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
10 1
|
9天前
|
存储 JavaScript 前端开发
改进JavaScript代码,给水果有序赋色
改进JavaScript代码,给水果有序赋色
|
11天前
|
存储 JSON JavaScript
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇在JavaScript中编写一个用于快递自动分拣的代码,区分省份、市区、县、城乡镇,通常意味着你需要一个数据结构来存储这些地理区域的信息,并编写逻辑来根据快递地址中的信息将其分配到正确的分类中。 这里,我将提供一个简化的示例,说明如何使用JavaScript对象和函数来实现这一功能。请注意,这个示例是高度简化的,并且假设你已经有了某种方式(如正则表达式或API调用)来从快递地址中提取省份、市区、县等信息。 ----------------------------------- ©著作权归作者所有:来自51CTO博客作者goS
|
9天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件)】
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件)】
6 0