先看一下 我们的结构：
第一阶段 配置：
api文件夹说明
api文件夹存放接口
user.js
import request from "../utils/request";//保存游戏类型export function saveGame(data) {return request({url: "/user-setting/xxxx",method: "post",data});}//获取游戏类型export function getGame(data) {return request({url: "/user-setting/xxxxx",method: "get",data});}
这里我们引入了，utils文件夹下的request.js
utils文件夹说明*
utils文件夹存放工具文件
request.js
首先需要安装axios，和qs，以及 ant-design-vue(也可以别的UI库 或者 不是使用也行)
import axios from "axios";import qs from "qs";import {getToken } from "../utils/auth";import Message from "ant-design-vue/es/message";// create an axios instanceconst service = axios.create({baseURL: process.env.VUE_APP_BASE_API,withCredentials: true,timeout: 5000,headers: {"Content-Type": "application/x-www-form-urlencoded"}});// 请求拦截service.interceptors.request.use(config => {// do something before request is sentif (config.method === "post" || config.method === "put") {config.data = qs.stringify(config.data);}if (config.method === "get") {config.url = config.url + "?" + qs.stringify(config.data);}// if (store.getters.token) {// let each request carry token// ['X-Token'] is a custom headers key// please modify it according to the actual situation// config.headers['X-Token'] = getToken()// Cookie: APPMGRID=5dcf8572f7c74ee28309b3ff67063686if (getToken()) {config.headers["token"] = getToken(); //这里换成你的token名字}// }return config;},error => {// do something with request errorconsole.log(error);return Promise.reject(error);});// 响应拦截service.interceptors.response.use(response => {const data = response.data;switch (data.code) {case 0:return Promise.resolve(data);case 301:Message.warn(data.msg || "请先登录");break;case 400:Message.warn(data.message || res.data.msg || "资源不在收藏列表中");break;case 401:Message.error(data.msg || "请先登录");break;case 403:Message.error(data.msg || "权限不足");break;case 404:Message.error(data.msg || "请求资源不存在");break;case 408:Message.error(data.message || "已经收藏过该视频");break;case 500:Message.error(data.msg || "服务器开小差啦");break;case 504:Message.error(data.msg || "网络请求失败");break;default:Message.error(data.msg || "请求失败");}},error => {console.log("err" + error);// Message({// message: error.message,// type: 'error',// duration: 5 * 1000// })return Promise.reject(error);});export default service;
上述代码引入了，getToken ，这里主要是auth.js 中设置的，主要作用是在 完成登录后，后面的请求 都在头部添加上token。
auth.js
需要安装 js-cookie
import Cookies from "js-cookie";const TokenKey = "token"; //这里是你的token名const UseridKey = "USERID";export function getToken() {return Cookies.get(TokenKey);}export function setToken(token) {return Cookies.set(TokenKey, token);}export function removeToken() {return Cookies.remove(TokenKey);}export function getUserid() {return Cookies.get(UseridKey);}export function setUserid(Userid) {return Cookies.set(UseridKey, Userid);}export function removeUserid() {return Cookies.remove(UseridKey);}
第二阶段 使用：
store主要用于数据处理：
index.js
import Vue from "vue";import Vuex from "vuex";import state from "./state";import mutations from "./mutations";import getters from "./getters";import user from './modules/user'; //用户信息import app from './modules/app'; //离线数据库Vue.use(Vuex);export default new Vuex.Store({state,getters,mutations,modules:{user:user,app:app}});
user.js
import {saveGame,getGame,} from "../../api/user.js";let state = {gameType: "",userInfos: ""};let getters = {userId: state =>(Object.keys(state.userInfo).length > 0 && state.userInfo.profile.userId) ||"",userPlaylists: state => state.userPlaylists,createdList: state => {return state.userPlaylists.filter(item => {return !item.subscribed;});},likedPlaylistIds: state => state.userPlaylists.map(item => item.id),likedsongIds: state => state.likedsongIds};let mutations = {SET_USER_INFOS(state, data) {state.userInfos = data.data;},SET_GAME_TYPE(state, data) {state.gameType = data;}};let actions = {GET_USER_INFO({commit }, data) {getGame({}).then(data => {commit("SET_USER_INFOS", data);});},CHOOSE_GAME({commit }, data) {let postData = {game_abbr: data};saveGame(postData).then(data => {commit("SET_GAME_TYPE", data);});}};export default {namespaced: true,state,getters,mutations,actions};
在项目中使用，例如这里的的保存游戏，去调用一个接口：
当单机确定的时候，去发送请求
choose_game.vue
<template><div class="choose-game"><div class="m-t"><div class="header">请选择您常用的游戏</div><div class="determine"><a href="#" class="animBtn themeA" @click="close">确定</a></div></div></div></template><script>import {mapState, mapMutations, mapActions } from "vuex";export default {name: "ChooseGame",data() {return {choose: false,type: "csgo"};},methods: {...mapActions("user", ["CHOOSE_GAME"]), //调引入mapActions 里面的接口close() {this.showDial = false;this.CHOOSE_GAME(this.type).then(rev => {}); //调用接口}}};</script>
第三阶段 配置环境：
这里有两种环境，开发 和生产环境
.env.development
# just a flagENV = 'development'# base apiVUE_APP_BASE_API = 'https://test//'# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,# to control whether the babel-plugin-dynamic-import-node plugin is enabled.# It only does one thing by converting all import() to require().# This configuration can significantly increase the speed of hot updates,# when you have a large number of pages.# Detail: /vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.jsVUE_CLI_BABEL_TRANSPILE_MODULES = true
.env.production
# just a flagENV = 'production'# base api#VUE_APP_BASE_API = '/prod-api'VUE_APP_BASE_API = '/'
