【译】如何大大简化你的Vuex Store
随着Vue
应用程序的大小增加,Vuex Store
中的actions
和mutations
也会增加。本文,我们将介绍如何将其减少到易于管理的东西。
Vuex是什么
Vuex
是vue.js
应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。
我们怎么使用Vuex
我们正在使用Vuex
在Factory Core Framework
应用程序中的所有应用程序之间共享状态。由于框架是一组应用程序,(假设)我们目前有九个Vuex stores
。每个store
都有自己的state, actions和mutations
。我们在store
中使用actions
来对后台进行API调用。数据返回后,我们使用mutations
将其存储在state
中。这允许任何组件访问该数据。可以想象到,我们的store
可以有大量的actions
来处理这些API调用。以下是我们其中一个Vuex stores
中所有的actions
操作示例。
这个store
有16个actions
。现在想象一下,如果我们有9个store
,我们的Factory Core Framework
总共有多少个actions
。
简化我们的Actions
我们所有的actions
操作基本上都执行相同的功能。每个action
都执行以下操作:
- 从API获取数据(必要时包括有效负载)
- 以
state
存储数据(可选) - 返回对调用该
action
组件的响应
要将这些重构为单个(统一)操作action
,我们需要知道action
需要明确的事情:
- 要击中的端点(请求接口)
- 在API调用中是否发送有效负载
- 是否将数据提交到
state
中,如果是,则提交到哪个状态变量
我们当前的action
下面是我们其中的一个actions
示范:
async getLineWorkOrders({ rootState, commit }, payload) {
try {
let response = await axios.post(
'api.factory.com/getLineWorkOrders',
Object.assign({}, payload.body, { language: rootState.authStore.currentLocale.locale }),
rootState.config.serviceHeaders
);
commit( 'setCurrentWorkOrderNumber', response.data.currentWorkOrderNumber );
return response.data;
} catch (error) {
throw error;
}
},
在这个action
中,我们通过击中端点(发起请求)api.factory.com/geteLineWorkOrders
从我们的后台API获取数据。检索到数据之后,将更新state
变量currentWorkOrder
。最后,数据将返回到进行调用的组件中。我们所有的actions
都有这种格式。要将它重构为单个操作,我们需要拥有端点,无论是否发送有效负载以及是否提交数据。下面
async getLineWorkOrders({ rootState, commit }, payload) {
try {
let response = await axios.post(
'api.factory.com/getLineWorkOrders',
Object.assign({}, payload.body, { language: rootState.authStore.currentLocale.locale }),
rootState.config.serviceHeaders
);
commit( 'setCurrentWorkOrderNumber', response.data.currentWorkOrderNumber );
return response.data;
} catch (error) {
throw error;
}
},
复制代码
在这个action
中,我们通过击中端点(发起请求)api.factory.com/geteLineWorkOrders
从我们的后台API获取数据。检索到数据之后,将更新state
变量currentWorkOrder
。最后,数据将返回到进行调用的组件中。我们所有的actions
都有这种格式。要将它重构为单个操作,我们需要拥有端点,无论是否发送有效负载以及是否提交数据。下面?是我们重构的单一action
:
async fetchData({ rootState, commit }, payload) {
try {
let body = { language: rootState.authStore.currentLocale.locale };
if (payload) {
body = Object.assign({}, payload.body, body);
}
let response = await axios.post(`api.factory.com/${payload.url}`, body, rootState.config.serviceHeaders );
if (payload.commit) {
commit('mutate', {
property: payload.stateProperty,
with: response.data[payload.stateProperty]
});
}
return response.data;
} catch (error) {
throw error;
}
}
复制代码
此单个action
将处理每种可能的调用。如果我们需要通过API调用发送数据,它可以做到。如果我们需要commit
提交数据,它可以做到。如果它不需要提交数据,则不会。它始终将数据返回到组件。
使用统一的mutation
之前,对于需要改变状态mutate state
的每个action
,我们创建了一个新的mutation
来处理这个问题。我们使用单一的mutation
来处理这个问题。下面是我们的单一mutation
:
const mutations = {
mutate(state, payload) {
state[payload.property] = payload.with;
}
};
复制代码
如果一个action
中需要在store
中存储数据,我们如下调用mutation
:
commit('mutate', {
property: <propertyNameHere>,
with: <valueGoesHere>
});
复制代码
总结
通过统一我们的action
和mutation
,我们大大简化了我们的store
中的actions
和mutations
。
译者加:其实就是为了更好的管理vuex,而形成模版方式的编写
后话
更多的内容,请戳我的博客进行了解,能留个star就更好了?
- 除了写烂的手写数据分类,你会不会做自定义图像数据集的识别?!
- shell脚本中字符串的常见操作及"command not found"报错处理(附源码)
- 绝对定位下的盒模型
- 运行shell脚本时报错"[[ : not found"解决方法
- 关于表联结方法(二) (r4笔记第23天)
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(一)设计一套好的RESTful API
- XSS分析及预防
- 关于ORA-01779问题的分析和解决 (r4笔记第22天)
- 想看爱奇艺VIP视频?一个python脚本帮你搞定
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(十四)Redis缓存正确的使用姿势
- 关于shell中的pl/sql脚本错误排查与分析(r4笔记第21天)
- 关于BFC不会被浮动元素遮盖的一些解释
- MyBatis + MySQL返回插入成功后的主键id
- struts2+spring+hibernate整合步骤(1)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Elastic search N-gram tokenizer
- java.io.IOException: com.esotericsoftware.kryo.KryoException: Encountered unregistered class ID: 110
- io.protostuff.runtime.RuntimeUnsafeFieldFactory cannot have the same number
- dubbo 调用报Null 空指针 ,可能并不是真正的空指针
- Hibernate单表操作(四)——组件属性
- Dubbo consumer消费端启动报错java.lang.RuntimeException: [source error] not available in a static method: h
- Groovy小记it关键字和IDE报错
- 05 . Jenkins定制主题和设置项目构建信息输出颜色
- 腾讯云物联网平台使用报告
- 01 . PostgreSQL简介部署
- 01 . Git常用命令及方法和分支管理
- 记一次公司mssql server密码频繁被改的事件
- elasticsearch 同义词更新,不同集群返回更新节点个数不一样
- H5应用加固防破解-js虚拟机保护方案浅谈
- struts2概述