vue-resource不再更新
我们来看看作者给出的解释，原话如下：

最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，
使用 fetchpolyfill 或是 axios、superagent 等等都可以起到同等的效果，
vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久以后取消对 vue-resource 的官方推荐。
已有的用户可以继续使用， 但以后不再把 vue-resource 作为官方的 ajax 方案。这里可以去掉 vue-resource，
文档也不必翻译了。

一起学习axios
1
<script src="https://unpkg.com/axios/dist/axios.min.js">  </script>


get请求
1
2
3
4
5
6
7
axios.get('/detail?id=10').then(function (res) {
    //成功获取数据
   console.log(res);
 }).catch(function (err) {
    //请求错误
   console.log(err);
 });


 使用过jquery的ajax方案的同学，学习axios应该没有任何难度。get请求也可以通过 params 对象传递参数。写法如下：

1
2
3
4
5
6
7
8
9
10
11
12

axios.get('/detail', {
   //参数
  params: {
       id: 10
   }
}).then(function (res) {
   //成功获取数据
   console.log(res);
}).catch(function (err) {
   //请求错误
   console.log(err);
});

相比第一种写法，这种写法的可读性更高，在接口后增加一个对象参数，其中一个属性为params，它的值就是我们要传递的参数id:10。

post请求

1
2
3
4
5
6
7
8
9
10
11

//执行post请求
axios.post('/add', {
   name: '前端君',
   age: 26
}).then(function (res) {
   //请求成功
 console.log(res);
}).catch(function (err) {
   //请求失败
 console.log(err);
});

多个请求并发

除了最常用的get请求和post请求以外，值得一提的是axios提供了一次性并发多个请求的API，使用方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function getProfile(){
   //请求1
   return axios.get('/profile');
}
function getUser(){
   //请求2
   return axios.get('/user');
}
        
//并发请求
axios.all([
   getProfile(),
   getUser()
]).then(axios.spread((res1, res2)=>{
   //两个请求现已完成
  console.log(res1);
   console.log(res2);
}));

 我们事先定义了两个方法  getProfile()  和  getUser()  帮我们实现get请求。

在某个业务场景中，我们需要同时产生以上两个get请求，并需要等待它们都请求完毕后再做逻辑处理，
你也许会想到回调嵌套，但现在你可以使用axios的并发请求API: axios.all() 

当这两个请求都完成的时候会触发 axios.spread() 函数，res1和res2两个参数分别代表返回的结果，相当实用的API。

其实上面我们刚刚讲到的 axios.get()  和  axios.post() 写法是axios给我们提供网络请求的一种别名方式
，如果你不喜欢这种写法，完成可以自己通过配置请求参数，实现你想要的请求效果。



举个栗子，对比一下。

手动配置参数，实现一个post请求：

1
2
3
4
5
6
7
8
9
10
11
12
13

// 发送一个 POST 请求
axios({
   method: 'post',
   url: '/user',
   data: {
       name: '前端君',
   }
});
使用post别名写法，实现一个post请求：
//发送一个 POST 请求
axios.post('/user', {
    name: '前端君',
})

两种写法均可，大家可以根据自己的喜好和习惯，任选一种。

别名写法是为了大家方便地阅读和编写代码，除了 axios.get() 和 axios.post() ，axios还为所有支持的请求方式提供了别名。

axios.request()
axios.delete( )
axios.head( )
axios.put( )
axios.patch( )

这些别名用法大同小异，大家需要用到的时候，可以查看axios的API文档，也十分简单。

除了以上常用的API以外，axios还提供了其他API，允许开发者配置默认值，拦截器，处理错误和消除请求等操作，
十分简单易用，在这里就不一一展开讲述了。


----摘自前端君教程

它有两大优点，一个是它的状态存储是响应式的，
  另一个是要不能随意修改Vuex的状态，必须按照它的规矩来办事。最后也了解了它有适用和不适用的业务场景。

  创建仓库Store
  
1
const store=new Vuex.Store({});


  核心：State

  Vuex的作用类似全局对象，没错，Vuex 使用单一状态树，
  用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

1
2
3
4
5

const store=new Vuex.Store({
    state:{
        count:5
    }
})

假设我们有一个全局状态count的值为5。
那么，我们就可以将其定义为 state 对象中的key和value，作为全局状态供我们使用。

state 中的状态被各个组件关联着，在开发调试过程中，我们可以结合vue-devtool工具，
可以清晰地看到整个应用的数据，非常方便。

但如果你使用的还是传统的方法，定义一个全局变量来管理这些全局数据，那么就非常不合理
不但不便于调试，而且全局变量容易造成全局污染等问题。


核心：Getters

还记得Vue中的计算属性computed吗？当我们需要在data的基础上再派生一些状态的时候，就会使用computed来实现。

同样，当我们需要从 state 中派生出一些状态的时候，就会使用到 getters ，你可以将 getters 理解 state 的计算属性。

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

1
2
3
4
5
6
7
8
9
10
11

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

假设我们要在state.count的基础上派生出一个新的状态newCount出来，
就适合使用我们的 getters ，上面说我们使用了ES6的箭头函数语法。

1
2
3
4
5
6
7
8
9

//ES6 箭头函数语法
newCount:state => state.count * 3,
         
//相当于
         
//传统语法
newCount:function (state ) {
   return state.count * 3;
}

核心：Mutations

Vuex相比传统的全局变量有两个优势，其中一个是Vuex中的状态不能随意修改
，要修改必要按照Vuex提供的方式才能修改。要用Vuex，咱就得听它的

Vuex给我们提供修改仓库 store 中的状态的唯一办法就是通过提交mutation。
我们来看看如何定义一个mutation，它和上面的 getters ，会接受 state 作为第一个参数：

1
2
3
4
5
6
7
8
9
10
11
12

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

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

 非常简单，Vuex要求我们要想通过 mutations 更改内容，就必须提交mutation，语法如下
  
1
2
 //提交一个名为increment的mutation
store.commit('increment');


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

此外，store.commit( ) 还接受其他额外的参数，比如：
   
1
2
3
4
5
6
7
8
//更改store状态的唯一途径
mutations:{
   increment(state,n){
       state.count += n;
   }
}
//...
store.commit('increment',10);


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

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

Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果你想想修改这个全局对象的数据？
是可以的，但没那么简单，你得按照Vuex提供的方式来修改，不能自己随意用自己的方式来修改。

为什么说只是类似全局对象呢？

说的是类似，就代表它跟我们之前使用的定义全局对象变量还不完全一样。主要有一下两点不同：

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

2.你不能直接修改Vuex的状态，如果是个全局对象变量，要修改很容易，
但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：
显示地提交（commint）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。
这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

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

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

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