Vue基础(一)

Vue-router

Vue的路由，先献上文档（https://router.vuejs.org/zh-cn/）

路由在Vue全家桶里面定位是什么呢，创建单页应用！简单！我们知道Vuejs是一系列的组件组成应用，既然是组件那么就需要组合起来，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们！

参考配置：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Layout from '@/views/layout/Layout'

export const constantRouterMap = [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '/',
          component: () => import('@/views/login/index')
        }
      ]
    }
]

export default new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
  })

Vuex

献上文档（https://vuex.vuejs.org/zh-cn/）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。什么是状态管理？可以简单理解为管理数据流，多页面共享一个data库（全局）。

参考配置：
test.js

const test = {
    state: {
        mytest: '12312312313'
    }
}

export default test

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import test from './modules/test'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        app,
        test
    },
    getters
  })

在组件调用

<template>
    <div>
        这是一个layout{{userame}}
        <a @click="handleLogin">点击我</a>
    </div>
</template>

<script>
import { getTest } from '@/api/login'

export default {
    name: 'Layout',
    data() {
        return {
            userame: this.$store.state.test.mytest 
        }
    },
    computed: {
        count () {
            return this.$store.state.test.mytest 
        }
    },
    methods: {
        handleLogin() {
            getTest(this.userame).then(response => {
                alert(response.data);
            })
        }
    }
}
</script>

axios

封装的ajax,可以根据自己的项目情况再进行封装，然后action中调用。具体可以参考https://github.com/mzabriskie/axios

参考配置：
封装 request.js请求工具

import axios from 'axios'
// import store from '@/store'

// 创建axios实例
const service = axios.create({
    baseURL: '',
    timeout: 15000 // 请求超时时间
})

service.interceptors.response.use(
    function (response) {
        //请求正常则返回
        return Promise.resolve(response)
    },
    function (error) {
        // 请求错误则向store commit这个状态变化
        // const httpError = {
        //     hasError: true,
        //     status: error.response.status,
        //     statusText: error.response.statusText
        // }
        // store.commit('ON_HTTP_ERROR', httpError)
        return Promise.reject(error)
    }
)
export default service

自定义的api请求login.js

import request from '@/utils/request'

export function getTest(params) {
    return request({
        url: '/u/register',
        method: 'get',
        params
    })
}

在组件中调用

  <template>
    <div>
        这是一个layout{{userame}}
        <a @click="handleLogin">点击我</a>
    </div>
</template>

<script>
import { getTest } from '@/api/login'

export default {
    name: 'Layout',
    data() {
        return {
            userame: this.$store.state.test.mytest 
        }
    },
    computed: {
        count () {
            return this.$store.state.test.mytest 
        }
    },
    methods: {
        handleLogin() {
            getTest(this.userame).then(response => {
                alert(response.data);
            })
        }
    }
}
</script>

总结

参考GitHub 整合源码