vuex - 简单使用步骤梳理,轻松掌握、附源码

简介: -----------------------往期-----------------------------vuex - 学习日记vuex - 辅助函数学习vuex - 常用命令学习及用法整理vuex - 项目结构目录及一些简单配置  -----------------------正文...

 -----------------------往期-----------------------------

vuex - 学习日记

vuex - 辅助函数学习

vuex - 常用命令学习及用法整理

vuex - 项目结构目录及一些简单配置

 

 -----------------------正文-----------------------------

首先,目录结构依然如下:

按配置顺序来说:

store.js(有时也命名为index.js)页面

store配置主要分以下几大块:

第一,引入依赖

vue和vuex不用说,getters、actions、mutations三个是用来增删改查store的,

 再引入一些自己需要的依赖,比如store中用到数据请求时,引入$axios,

如需根据状态切换路由,再引入router

如需要设置存储sessionstore时再引入自命名的ls配置文件等。

第二,使用vuex

Vue.use(Vuex)

第三,定义vuex数据状态

let state = {...}

 第四,业务逻辑处理

自己需要使用store所做的一些业务逻辑,可以在这里定义处理了。

第五,输出

1 export const store = new Vuex.Store({
2   state,
3   getters,
4   actions,
5   mutations
6 });

 

接下来,store里边设置了state数据,想要取到的话,就去getters里边设置

getters.js页面

我这里偷个懒,全部抛出了自己的state,然后使用时直接state.属性了。

 

 修改store数据三步走 - 流程如下

vue组件中dispatch、action.js中commit、mutations.js文件中执行

1.组件内部dispatch分发任务

2.action.js传达任务

3. mutations.js里边执行具体任务

多了一个mutation-type.js,他的作用是给mutations里边定义变量名称用的。

具体为什么非要这么分出来写下,除了便于管理之外,我也不知道更好的理由了。

 

 

 

目录
打赏
0
0
0
0
4
分享
相关文章
【2023年第十三届APMCM亚太地区大学生数学建模竞赛】A题 水果采摘机器人的图像识别 Python代码解析
本文介绍了2023年第十三届APMCM亚太地区大学生数学建模竞赛A题的Python代码实现,详细阐述了水果采摘机器人图像识别问题的分析与解决策略,包括图像特征提取、数学模型建立、目标检测算法使用,以及苹果数量统计、位置估计、成熟度评估和质量估计等任务的编程实践。
247 0
【2023年第十三届APMCM亚太地区大学生数学建模竞赛】A题 水果采摘机器人的图像识别 Python代码解析
实时计算 Flink版产品使用合集之maxcompute更新写入如何解决
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
基于ENVI与ERDAS的Hyperion高光谱经验比值法、一阶微分法叶绿素及地表参数反演
基于ENVI与ERDAS的Hyperion高光谱经验比值法、一阶微分法叶绿素及地表参数反演
274 1
提升性能的利器:理解线程池的使用、工作原理和优势
在Java中,创建和销毁线程开销较大,为了避免线程过多而带来使用上的开销。 所以我们需要对线程进行统一管理及复用,这就是我们要说的线程池。
Kubernetes集群故障排查—审计
Kubernetes集群故障排查—审计
282 1
Kubernetes集群故障排查—审计
如何实现一个完整的日期类?
Tip 关于内联函数:在类内定义的函数,如果代码量少的话,编译器会酌将其转换成内联函数,这样会在调用的地方直接展开,能够提高效率。 在这个日期类中,提高的效率不是很大,所以在本文将日期类的成员函数的声明和定义分离了。如果想写成内联,需要直接在类里面定义。(内联的声明和定义不能分离)
某Java程序员在外包公司每天读写删改几年后,发现跳不出来了
面试了一波Java程序员,有好几位80后的。按理说,他们有将近十年的工作开发时间,无论经验还是技术都应该称得上老司机了。着重考察了Spring中bean的后置处理器相关问题,大概是这样问的:
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问