Vuex是什么?
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex是干什么的?
试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。
也就是说如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理数据状态,Vuex将会成为自然而然的选择。
为什么使用Vuex?
VueX状态自管理应用包含以下几个部分:
state,驱动应用的数据源;view,以声明方式将state映射到视图;actions,响应在view上的用户输入导致的状态变化。我们知道Vue的理念就是单页面应用和单项数据流:
单项数据流但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
1.多个视图依赖于同一状态。2.来自不同视图的行为需要变更同一状态。对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式就会变得非常脆弱,通常会导致无法维护的代码。
因此,为了把组件的共享状态抽取出来,以一个全局单例模式管理就是诞生了,在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,我们的代码将会变得更结构化且易维护。
这就是Vuex背后的基本思想
VueX中的核心内容
在VueX对象中,最重要的就是操作state中数据的方法集以及当我们需要对state中的数据需要加工的方法集来调整组件间数据的状态,而这些方法集的成员包括以下:
state方法用于存放数据状态mutations方法用于对state中的成员的操作,比如对该数据的修改、增加、删除等等。getters方法用于加工state成员给组件展示actions方法用于state成员的一些异步操作,由于直接在mutations方法中进行异步操作,将会引起数据失效。所以提供了Actions来专门进行异步操作,最终提交方法。modules模块化状态管理
Vuex的工作流程如何创建项目
由于VueX是在学习VueCli后进行的,所以在下文出现的项目如何创建请参照文章《Vue全家桶之Vue2.X和Vue3.X脚手架创建项目的不同方式》或者在我的主页查看
以下项目目录是Vuecli3.x创建的
由于在创建项目时就安装了Vuex所以目录中以及创建好了store文件夹下的index.js
也可以手动安装输入命令npmivuex-s,然后在项目的根目录下新增一个store文件夹,在该文件夹内创建如上图的index.js
注意:打开项目中的main.js文件,将store挂载到当前项目的Vue实例当中去
导入并挂载方可全局使用下面来创建是VueX的项目示例
1.在