初识Vuex

Vuex是什么

Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex采用相似全局对象的形式来管理全部组件的公用数据，若是你想一想修改这个全局对象的数据？是能够的，但没那么简单，你得按照Vuex提供的方式来修改，不能本身随意用本身的方式来修改。

使用Vuex的好处

为何说只是相似全局对象呢？

说的是相似，就表明它跟咱们以前使用的定义全局对象变量还不彻底同样。主要有一下两点不一样：

• 1.Vuex的状态存储是响应式的，什么意思呢？就是当你的组件使用到了这个Vuex的状态，一旦它改变了，全部关联的组件都会自动更新相对应的数据，这样开发者省事不少。

• 2.你不能直接修改Vuex的状态，若是是个全局对象变量，要修改很容易，可是在Vuex中不能这样作，想修改就得使用Vuex提供的惟一途径：显示地提交（commint）mutations来实现修改。这样作的好处就是方便咱们跟踪每个状态的变化，在开发过程当中调试的时候，很是实用。

以上两点是Vuex状态管理跟使用传统全局变量的不一样之处，也是Vuex的优点所在。那是否是全部使用vue开发的SPA（single page application）单页应用都适合采用Vuex呢？

适用场景

固然也不是，若是你的应用是个小型的应用，组件很少，组件之间的状态依赖很少，关系清晰容易维护，也就是说不一样组件之间不多有数据之间的关联的话，那么你大可不用Vuex来开发。

反之，若是你开发的是较大型的应用，出现多个视图组件共同依赖一个状态，这个状态至关于咱们的全局对象数据，其余组件的改动，会影响到它，反之，它的修改也须要更新其余关联的组件，那么Vuex就很适用。好比：商城系统，外卖系统等等。

如何使用Vuex

（1）建立仓库Store
要使用Vuex，咱们要建立一个实例 store ，咱们称之为仓库，利用这个仓库 store 来对咱们的状态进行管理。

//建立一个 store
 const store = new Vuex.Store({});

（2）核心：state
Vuex的做用相似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的全部状态，你能够理解为这些状态就是一堆全局变量和数据。

//建立一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });

上面的例子中，假设咱们有一个全局状态count的值为5。那么，咱们就能够将其定义为 state 对象中的key和value，做为全局状态供咱们使用。

state 中的状态被各个组件关联着，在开发调试过程当中，咱们能够结合vue-devtool工具，能够清晰地看到整个应用的数据，很是方便。

（3）核心：Getters
当咱们须要在data的基础上再派生一些状态的时候，就会使用computed来实现。

一样，当咱们须要从 state 中派生出一些状态的时候，就会使用到 getters ，你能够将 getters 理解 state 的计算属性。

getters 接受 state 做为其第一个参数：

const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
    },
    //派生出来的状态
   getters:{
      //ES6 的箭头函数语法
    newCount:state => state.count * 3
    }
 });

（4）核心：Mutations
Vuex给咱们提供修改仓库 store 中的状态的惟一办法就是经过提交mutation。咱们来看看如何定义一个mutation，它和上面的 getters ，会接受 state 做为第一个参数：

const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    //更改store状态的惟一途径
    mutations:{
        increment(state){
            state.count ++;
        }
    }
 });

咱们再 mutations 中定义了一个叫increment的函数，函数体就是咱们要进行更改的地方，能够看到，咱们只是简单地对 state 中的count进行了自增运算。

mutations 咱们是定义好了，怎么使用呢？
Vuex要求咱们要想经过 mutations 更改内容，就必须提交mutation，语法以下：

//提交一个名为increment的mutation
 store.commit('increment');

咱们再提交commit 时候，字符串参数increment,就是对应在 mutations 中的increment。

此外，store.commit( ) 还接受其余额外的参数，好比：

//...
 //更改store状态的惟一途径
 mutations:{
    increment(state,n){
        state.count += n;
    }
 }
 //...
 store.commit('increment',10);

咱们在提交的时候额外传了参数10，只要在定义 mutations 的时候定义与之相对应的形参就能够处理了。