Vue登录案例，封装请求，储存，api，异步，vuex模块实现登录。

实现原理，执行过程

点击登录按钮执行vuex模块中的异步方法并传递参数，通过Promise请求封装
的api接口login方法，在方法中通过context上下文获取vuex中mutations的
方法setToken方法，并传递token值。token获取到调用封装的储存方法setT
oken 传递过去就完成了储存token，然后通过resolve表示请求执行完成。

代码执行流程详图↓↓↓

1.登录页面：

做了什么?

1.在登录页面我们点击登录按钮，调用addLogin的方法。执行vuex中的方法，并
且传递我们登录的用户信息账号密码

<template>
    <div class="login">
        login
        <button @click="addLogin">登录</button>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
    name: 'loginIndex',
    data() {
        return {

        }
    },
    methods: {
        ...mapActions('my_home', ['loginAcs']),
        // 点击登录调用这个方法
        // 调用异步方法发送数据
        async addLogin() {
            await this.loginAcs({
                "email": "27732357@qq.com",
                "password": "321321"
            })
        }
    }
}
</script>

<style>

</style>

2.vuex模块中：

做了什么?

2.在vuex模块中获取对本地存储的封装，获取api的封装，在异步方法中执行，接受
传递过来的数据，通过Promise执行封装登录的api方法，在then中接受参数，通过
context.commit执行本地中mutations中的setToken方法，在setToken方法中执
行封装的储存方法，将token储存到本地，并且将token储存到，vuex的state的
token数据中。

import { getToken, setToken, removeToken } from '@/utils/auth'
import { login } from '@/api/index'
export default ({
    namespaced: true,
    state: (() => {
        return {
            msg: 123,
            token:getToken()
        }
    }),
    mutations: {
        // 在异步中调用这个方法
        setToken(state,v){
            // v是传递的token
            state.token = v
            // 储存token
            setToken(v)
        }
    },
    actions: {
        loginAcs(context,data) {
            // context = 当前模块的vuex中的所有数据
            console.log(context);
            return new Promise((resolve,reject)=>{
                // 调用封装的api接口，并且传递数据这个
                // 数据是我们调用方法传递的邮箱和密码
                login(data).then(res=>{
                    console.log(res);
                    // 调用mutations中的方法并且传递token
                    // 通过上下文获取到当前页面的mutations的方法
                    // 调用这个方法修改token值并且调用储存，
                    context.commit('setToken',res.data.token)
                    // 必须写resolve 代表执行完成！！！！
                    resolve()//表示请求执行完成了
                })
            })
        }
    }
})

3.封装的api页面中

3.通过按需导出export 将我们封装的函数抛出，函数中指定url地址，methods请求方式，传递的数据data

import http from '@/utils/index'

// 注册
export function register(data){
    return http({
        url:'/users/register',
        method:'POST',
        data
    })
}
// 注册
export function login(data){
    return http({
        url:'/users/login',
        method:'POST',
        data
    })
}

4.封装的本地储存方法中：

4.在这个页面中，对本地储存进行一个封装的处理并且通过export按需导出。

const token = 'LTtoken'
// 获取
export function getToken() {
    return localStorage.getItem(token)
}
// 储存
export function setToken(v) {
    return localStorage.setItem(token,v)
}
// 删除
export function removeToken(){
    return localStorage.removeItem(token)
}