vuex原理

Vuex状态管理模式

原来：单向数据流

state:驱动应用的数据源 view:以声明方式将state映射到视图上 Actions:响应View上用户输入状态变化

当多个组件共享状态时，传参繁琐，单项数据流不适用，引入Vuex

Vuex的状态存储是响应式的，当store中状态变化,组件中也会更新

mutation:在Vuex中不能直接改变store中的状态，必须通过提交（commit）mutation，同步函数

store.state获取状态   store.commit触发状态更新

getters:在store中派生出一些状态

action：当改变状态异步时，不能再使用mutations，可以使用actions，提交(dispatch)mutations

Vuex原理

Vuex的store是如何注入到组件的？

先从Vuex表象分析，在使用之前我们需要先进行安装

Vue.use(Vuex); // vue的插件机制,安装vuex插件

在使用Vuex时会调用install方法，而install方法的实现如下

Vue.mixin({ beforeCreate: vuexInit });

由此可见，Store注入vue实例组件的方式，主要通过Vue中的mixin机制，借助vue组件的生命周期钩子函数beforeCreate，在beforeCreate钩子函数调用之前调用vuexInit方法代码如下：

this.$store = typeof options.store === 'function'
? options.store()
: options.store

得益于mixin机制，this指向为vue组件实例，在vue实例上获取vuex的store对象的引用对象$store

结论

vuex利用了vue的mixin机制，混合beforeCreate钩子函数，将store注入到vue实例上，并注册了vuex store的引用属性$store

vuex的state 和 getter 是如何映射到 各个组件实例中自动更新的？

vuex的state是借助vue的响应式data实现
getters是借助vue的计算属性computed实现

创建仓库导出，new的时候会给Vuex.js中传入一堆的东西

state实现：

vuex.js定义一个Vue，让全局都可以使用，new的时候给Vuex.js中传入一堆东西，在接收时用constructor,通过options传递过来，给每一个组件的$store上挂一个state，让每一个组件都可以使用，

getters实现:

getters虽然是一个方法但在使用时可以当做是属性
当改变数据时，不能动态的渲染，需要把data中的数据做成响应式的，需要new Vue(异步 （请求数据）)
遍历每个数组得到方法名，里面需要用到箭头函数，不改变this指向，

     //遍历这个数组，得到每一个方法名
    Object.keys(getters).forEach((getter)=>{
        // console.log(getter);    //打印出  myName   myAge
        Object.defineProperty(this.getters,getter,{
            //当你要获取getter的时候，会自动调用get这个方法
            //一定要用箭头函数，要不然this指向会出现问题
            get:()=>{
                // console.log(this);
                return getters[getter](this.state)
            }
        })
    })