对Vuex的理解（个人学习）

1.什么是vuex

·vuex是一个专为vue.js应用程序开发的状态管理模式，它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2.vuex的五大核心属性

State、Getter、Mutation 、Action、Module

state => 基本数据
·就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。　
·就是存放数据的地方，类似一个仓库 , 特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（ 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 ）

getters =>是 store 的计算属性
·用来获取数据
·可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

@1.<button @click="addAction">+</button>  
@2.import { mapGetters } from 'vuex'　　　
　　　　 computed: {
　　　　　　// 使用对象展开运算符将 getter 混入 computed 对象中
　　　　　　...mapGetters(["count"])
　　　　}
@3.var getters={
　　　　　count:function(state){
　　　　　      return (state.count<10 && state.count>0)?'0'+state.count:state.count;
　　　　}
	}

mutations => 提交更改数据的方法，同步方法
·更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
·调用方法this.$store.commit

actions => 异步操作
·像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex
·将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

const moduleA = { state: { ... }, mutations: { ... }, 		        actions: { ... }, getters: { ... } }
const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } }
const store = new Vuex.Store({
　　　　　　 modules: { a: moduleA, b: moduleB }
　　　 })
　　 store.state.a // -> moduleA 的状态
　   store.state.b // -> moduleB 的状态
　
　　　2.本来是 this.$store.state.count =》this.$store.state.a.count
　　　　computed:{
　　　　　　// ...mapState(["count"]),
　　　　　　count () {
　　　　　　　　return this.$store.state.a.count
　　　　　　},
　　　　　　// ...mapState({
　　　　　　// count:state=>state.a.count //理解为传入state对象，修改state.count属性
　　　　　　// })
　　　　}

3.vuex的数据传递流程图

*改变state的唯一方式就是通过mutations进行更改

vuex关键词：
·集中式状态管理模式（注意是强调管理应用的所有组件的状态）
·可预测（前提是以相应的规则作为保证）

4.单项数据流

·state 驱动应用的数据源；
·view 以声明方式将 state 映射到视图；
·actions 响应在 view 上的用户输入导致的状态变化。

5.vuex的好处

vuex解决了:
1.多个组件共享状态时，单向数据流的简洁性很容易被破坏：
2.多个视图依赖于同一状态。
3.来自不同视图的行为需要变更同一状态。
vuex使用场景：
中大型单页应用，考虑如何更好地在组件外部管理状态，简单应用不建议使用