关于Vuex的初步了解

一、什么是Vuex

用学过react的人来说:Vuex 之于 Vue 就像 Redux 之于 React,这边附上一篇Vuex文档地址http://vuex.vuejs.org/en/intro.html

Vuex是集中的应用程序架构为了Vue.js应用程序状态管理。灵感来自Flux 和 Redux,但简化的概念和实现是一个专门为 Vue.js 应用设计的状态管理架构。

状态管理: 简单理解就是统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )

二、我们为什么需要Vuex

如果你的应用程序很简单,你可能不需要Vuex。不要过早地应用它。但是如果你正在构建一个medium-to-large-scale SPA,那么你遇到的情况,让你思考如何更好的结构Vue组件之外的事情。这是Vuex发挥作用的地方。

当单独使用Vue.js,我们常常倾向于存储状态我们的组件内。也就是说,每个组件属于我们的应用程序状态,因此结果状态乱扔的到处都是。然而,有时一块状态需要由多个组件共享。常见的做法是让一个组件“发送”一些使用自定义事件系统其他组件。这种模式的问题是内部的事件流大组件树很快就变得复杂,通常很难原因时出现错误。

更好地处理共享状态在大型应用程序中,我们需要区分组件本地状态和应用程序级状态。应用程序状态不属于一个特定的组件,但我们的组件还可以观察反应DOM更新。通过集中管理在一个地方,我们不再需要传递事件,因为一切影响多个组件应该属于那里。此外,这让我们记录和检查状态变化的每一个突变更容易理解,甚至实现花哨的东西穿越调试。

Vuex也执行一些意见如何状态管理逻辑分割成不同的地方,但仍然允许足够的灵活性的实际代码结构。

三、单向数据流

作用:减少数据传递,数据统一存放管理

四、callApi()

在action中使用,有五个参数分别是(ApiCode,parent,success,false,fail)

success,成功后回调,false更新数据

一般用前三个参数

五、1、store 2、action 3、Vuex  4、添加到store.js

时间: 2024-10-12 20:14:28

关于Vuex的初步了解的相关文章

Vuex入门(5)—— 为什么要用Action管理异步操作

Action 类似于 mutation,不同在于: 1.Action 提交的是 mutation,而不是直接变更状态. 2.Action 可以包含任意异步操作. 官方给的定义我没什么意见,事实上我通过mutation异步操作,好像跟用action管理也没什么区别.关于为什么要用Action管理异步操作,我会通过一个简单的例子和一个复杂的例子来进行说明,事实上,如果初学者没有考虑到实际场景的复杂情况,会觉得Action根本没有一点软用,这个时候就要把问题想得复杂一些了,然后才能看到Action的作

初步了解CPU

了解CPU By JackKing_defier 首先说明一下,本文内容主要是简单说明CPU的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. 一.总述 先从计算机的结构说起,在现代计算机中,CPU是核心,常常被比喻为人的大脑.现在的计算机都为“冯·诺依曼机”,“冯诺依曼机”的一个显著的特点就是由运算器.存储器.控制器.输入设备和输出设备组成.CPU是运算器和控制器合起来的统称,因为运算器和控制器在逻辑关系和电路结构上联系十分紧密,尤其在大

zerglurker的C语言教程004——指针初步讲解

在上次的教程里面,我提到了指针. 针对指针,这次我将简单的讲讲,后面我还会讲到--那个时候你应该有了相当的基础. 首先,先讲讲指针类型. 任何类型关键字后面加一个*符号,就会变成指针类型. 比如: char → char* 字符指针 int → int* 整数指针 double→double* 双精度指针 甚至还可以这样: char*→char** 字符指针的指针类型 →char*** 字符指针的指针的指针类型- 指针本质上是一个内存地址值,该内存地址上存放的是相关类型的数值.但是void*指针

nodejs,webpack安装以及初步运用

nodejs安装: 1.下载:https://nodejs.org/en/download/ 2.安装node-v6.11.3-x64.msi文件,直接默认安装(next--): 3.验证是否完成安装:cmd 进入后输入命令 node -v  回车能得到nodejs版本号: 输入node 回车再输入console.log('aaaaa') 回车能正常显示输出. 这表示nodejs安装成功. webpack安装: 1.npm安装:在f盘新建文件夹webpack,在webpack文件夹建文件夹dem

vuex中filter的使用 && 快速判断一个数是否在一个数组中

vue中filter的使用 computed: mapState({ items: state => state.items.filter(function (value, index, arr) { return index < 5 }) }), 如上所示,对于vuex,我们在使用mapState获取state时, 可以使用filter来过滤其中的元素,在filter的回调函数中接受三个参数,第一个是value,即每一个元素的值: 第二个是index, 即每一个元素所在的index, 第三个

Github 的注册教程和初步使用体验

我叫许晴,是网工143的学生,学号是1413042064,兴趣包括手绘,看书和手游.学习过c++和汇编语言课程,但在编程方面没什么独立实践经验. 我的Githup用户名是 XQ123 .下面是我在github的注册流程及初步使用体验. 我先搜索github,试了好几次才进去官网,但是在手机客户端注册的话比较好进.这是网页注册的界面.使用名不能设成中文,只能使用数字.字母和特殊符号,不能以短横线开头.如果设置的用户名有重复的话也不能设置 如果设置的用户名已经有人使用的话,也是不能设置的. 然后就是

初识vue 2.0(4):vuex组件通信

0,本来想只用vue就可以做项目了,后来发现不行:一个网页被切分成若干个组件,组件之间是需要数据传递的,因此引入了vuex这个集中式存储.管理的状态管理模式. 1,安装vuex: npm install --save vuex 在main.js中引入: import Vuex from 'vuex' Vue.use(Vuex) 2,创建数据源文件vuex/store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) co

Vue入门之Vuex实战

引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进行传递数据,而且数据传递是单向的.也就是说:父组件可以把数据传递给子组件,但是 反之则不同.如下图所示: 单向数据流动 单方向的数据流动带来了非常简洁和清晰的数据流,纯展示性或者独立性较强的模块的开发确实非常方便和省事. 但是复杂的页面逻辑,组件之间的数据共享处理就会需要通过事件总线的方式解决或者使用Vue的

[Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. Creating a remove action looks almost the same as the add action except for using the axios.delete method then filtering out the deleted todo once the