VUEX

Vuex 是专门为 Vue.js 设计的状态管理库适用于构建一个中大型单页应用，

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是更新的。
2. 通过显式地提交(commit) mutation改变 store 中的状态：store.commit 方法触发状态变更。

Getter：从 store 中的 state 中派生出一些状态。

以属性的形式访问这些值store.getters

VUEX总结：

VUEX是用来在大型的项目中的前端插件，当项目比较大，有些数据要共享，有些操作要共享的时候，就用它。相当于又抽了组件在VUEX。它有四个主要的选项：state mutations  getters  actions。

VUEX使用前要在创建Vue实例前加一句代码：

Vue.use(Vuex);//在创建Vue实例之前，script开始之后。

Vue里加一句：

store:myStore,

State存放共享的数据相当于Vue的data，区别是data是私有的，state是公有的，mutations是用来直接更改state的数据，getters用来获取state里的数据，action是异步中的更改state数据的方法，通过控制mutations。Vuex.Store就是个仓库，存放这些东西。Vuex是响应式的，只有当数据变化时才能得到响应。

Vue里静态的通过$store.state.name访问state数据。Get里可以由函数取state的数据，并对数据做处理。

Vue里只有mutations才能更改state的值。Mutations是同步的方法。Vue里用this.$store.commit('change',payload)

例如this.$store.commit('change',10)调用mutations。

Action是做异步的更改数据，不是直接更改，通过mutations更改。Vue里通过this.$store.dispatch('add', 5);触发Action,action里的方法再触发mutations

开始创建：

var myStore =  new Vuex.Store({

        state:{

            //存放组件之间共享的数据

            name:"jjk"

        },

         mutations:{

             //显式的更改state里的数据

               change:function(state,a){

                //  state.num++;

               console.log(state.num += a);

 

         },

         getters:{

             //获取数据的方法

                  getAge:function(state){

                  return state.age;

             }

         },

         actions:{

              //设置延时

             add:function(context,value){

             setTimeout(function(){

　　　　　　   //提交事件

               context.commit('changeAsync',value);

                 },1000)

                

             }

         }

});

各个类型的 API各司其职，mutation 只管存，你给我（dispatch）我就存；action只管中间处理，处理完我就给你，你怎么存我不管；Getter 我只管取，我不改的。action放在了 methods 里面，说明我们应该把它当成函数来用（讲道理，钩子函数也应该可以的） mutation是写在store里面的，这说明，它就是个半成品，中间量，我们不应该在外面去操作它。getter写在了 computed 里面，这说明虽然 getter我们写的是函数，但是我们应该把它当成计算属性来用。