前端开发框架Vue中Vuex的使用原理分享
在前端培训开发工作中，Vue.js的使用是主流技术，尤其是项目开发过程中只要使用到涉及Vue的状态管理就必然会用到Vuex。本篇博文就来分享一下关于Vuex的相关知识点，方便后期查阅使用。
1、首先来了解一下Vuex是什么？
官方文档是这样介绍的:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。事例如下所示：
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: {{ count }} ,
// actions
methods: {
increment () {
this.count++
}
}
})
Vuex 作为Vue官方推出的状态管理框架，而且其具有便捷、简单API设计的开发工具支撑，在大中小Vue项目中得到很好的应用，很好的结合了Vue的响应式数据。
2、接着再来了解一下为什么要使用Vuex?
先来了解一个知识点：Vue是单向数据流的方式驱动的，流程图如下所示：
文章图片
（该图来源于网络，如有侵权请联系作者删除）
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
上述是一个单向数据流理念的简单示意流程，如果应用遇到多个组件共享状态的时候，单向数据流的简洁性就很容易遭到破坏。当多个视图依赖于同一个状态，或者来自不同视图的行为需要更改同一个状态，这时候就需要用到Vuex。Vuex是类似于Redux的状态管理器，用来管理Vue的所有组件状态，采用集中式存储管理应用的所有组件的状态，并且以相应的规则来保证状态以一种可预测的方式发生变化。还有在前端模块化项目中，用到某些变量需要在全局范围内引用的时候，也可以用到Vuex来解决。
3、Vuex的构成
文章图片
（该图来源于网络，如有侵权请联系作者删除）
通过上图可以看到Vuex由以下几个部分组成：
（1）State
State单一状态树，是存储的单一状态，存储的是基本数据；
【前端开发框架Vue中Vuex的使用原理分享】（2）Getters
Getter是从State中派生出来的，属于store的计算属性对State进行加工之后派生出来的数据，和computed的计算属性一样，getter的返回的值会根据它的依赖进行缓存处理，而且只有当它的依赖值发生变化改变的时候才会被重新计算；
（3）Mutations
Mutation是提交修改的数据，通过使用store.commit方法更改state的存储状态，mutation必须是同步函数；
（4）Actions
Action类似Mutation，但是Action提交的是Mutation，而不是直接改变状态，还可以包含任何异步操作；
（5）Modules
Module是由store分割成的模块，每个模块都拥有自己的state、getter、mutation、action，以及嵌套子模块（从上到下进行同样方式的分割）
4、Vuex其他
（1）Vuex 动态注册模块：
Vuex 通常使用静态模块，这些模块在打包的时候都会打到 app.js 中，但是若有的模块过大而且不是必须立马用到的，就可以动态的注册模块到 vuex 中。
在使用Vuex 某个模块的时候再进行注册：
mounted () {
this.$store.registerModule('myModule', MyModule)
}
在不使用的时候，注销该模块：
beforeDestroy () {
this.$store.unregisterModule('myModule')
}
这样实现的效果是该页面在加载时才下载模块内容，而不是刚访问网站就去下载该模块内容。
（2）Vuex的项目结构
Vuex不限制代码结构，但是规定了一些需要遵守的规则：应用层级的状态需要集中到单个store对象中；提交mutation是更改状态的唯一方法，且该过程是同步的；异步逻辑都应该封装到action里面。
最后，Vuex的状态存储是响应式的，当Vue组件从store中读取状态时，若store中的状态发生变化，那么相应的组件也会得到高效更新。Vuex是通过全局注入store对象来实现组件之间的状态共享，如果在中大型项目中时，想要实现某个组件改变某个数据，多个组件自动获取更改后的数据来进行业务逻辑处理，这时候就要适用Vuex；如果在项目中只是多个组件间传递数据，没有其他复杂操作，适用组件间常用通信方式即可，没必要使用Vuex。
推荐阅读
- android第三方框架（五）ButterKnife
- 深入理解Go之generate
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- Jsr303做前端数据校验
- 我的软件测试开发工程师书单
- echart|echart 双轴图开发
- NPDP拆书（三）（新产品开发战略（经营与创新战略））
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- Spring|Spring 框架之 AOP 原理剖析已经出炉！！！预定的童鞋可以识别下发二维码去看了