vue-axios、vue-router、Vuex

1 axios
axios:
    npm install --save axios  //全局
vue-axios:
    npm install --save axios vue-axios //vue兼容

    main.js引入：
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    Vue.use(VueAxios,axios);

    页面使用:
    this.axios.get()....
    Vue.axios.get()...

2 vue-router
    1）安装：npm install vue-router
    2）Vue.use(Router)
    export default new Router({
      routes: [
        { path: '/', name: 'HelloWorld',component: HelloWorld},
        { path: '/login', name: 'Login',component: Login}
         { path: '/detail/:id', name: 'detail',component: Detail}
         //this.$route.params.id //获取路由中的id
      ]
    })

    3）页面点击链接跳转，生成a标签（router-link）：
    <router-link to="{name:'detail',params:{id:33}}">detail</router-link>



3、单个页面组件包含子组件，外面一定要有个根div，并且此div的id，
要与当前主键的name相同

4、Vuex：声明全局变量、请求：

    4.1 npm install vuex
    4.2 main.js:
    import Vuex from 'vuex'
    Vue.use(Vuex);

    原理：组件vue通过dispatch然后调用Vuex中对应的action中的
    方法,action方法去后端取数据，然后action中方法通过commit
    触发，将数据传递给mutations中的方法，mutations的方法将数
    据传递给state中数据，然后组件vue在页面就可以通过控制全局的
    state中的数据来处理页面

    eg:
    1) main.js代码：

    const store = new Vuex.Store({
      state: {
        todos: []
      },
      mutations: {
        get_todos_list(state,todos){
          state.todos = todos
        }
      },
      actions:{
        getTodos(store){
          Vue.axios.get('http://tast.test/api/getData')
              .then(function (response) {
                let data = response.data
                store.commit('get_todos_list',data) //将数据传递到mutations中的get_todos_list
              })
              .catch(function (error) {
                console.log(error)
              })
        }
      }
    })


    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,
      router,
      components: { App },
      template: '<App/>'
    })


    2）组件中调用
    export default{
        mounted(){
            this.$store.dispatch('getTodos');//action方法名字
            //访问store.state.todos，这个是全局的
            console.log(this.$store.state.todos) 
        }
    }

    3）通过js中将全局变量传递给模板html，通过computed：
    export default{
        mounted(){
            this.$store.dispatch('getTodos');//action方法名字
            //访问store.state.todos，这个是全局的
            console.log(todos) 
        },
        computed:{
            //这个todos是这个组件自己的，模板可以访问到
            todos(){
                //这个是全局的，模板访问不到
                return this.$store.state.todos;
            }
        }
    }


    【注】：这里提一下，在组件中调用new Vue加载的变量，都要使
    用"$",如this.$router、this.$store