碼迷,www.tparu.icu
吉利平特名人堂 > 移動開發 > 詳細

金平特色菜:使用axios+vuex來調接口使數據隨處可用

時間:2019-05-23 18:24:35      閱讀:14      評論:0      收藏:0      [點我收藏+]

吉利平特名人堂 www.tparu.icu 標簽:new   用戶信息   url   port   五步   pos   iap   內容   auth   

首先安裝:axios和vuex
這里推薦使用:vue ui來以插件的形式安裝axios,注意vue ui是腳手架3.0才開始有這個,vuex的安裝我就不在介紹了請自行安裝。
安裝好整個項目后包括axios和vuex,這個時候我們再對項目的目錄簡單的改改下:

第一步:在src目錄下新建文件夾stores目錄,再建目錄modules(存放自己創建的文件)和同級文件getters.js。
第二步:把main.js同層級下的store.js移到stores目錄里,把名稱改成index.js

import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app.js"; //modules目錄下隨意創建你要的文件,這里我創建了app.js文件
import getters from "./getters";
Vue.use(Vuex);
const store = new Vuex.Store({
  modules: { app },
  getters
});
export default store;

第三步:把main.js里的store.js的引入地址改成如下即可:

import store from "./stores";

第四步:把modules目錄里的app.js修改如下,這里我已經使用Promise創建了登錄和退出的兩個例子,當接口返回成功有帶回的數據我可以在這里做處理到state里,這個時候,我就可以在整個項目的隨便一個組件里,使用compoted來獲取到值,當然這里你要可以使用cookie或者sessionStorage,localStorage來做這個緩存你的用戶信息,這里我是放在utils目錄的auth.js文件里:

<template>
  <div>{{userinfo.username}}</div>
</template>
computed: { //任何一個組件里怎么調用
    userinfo() {
      return this.$store.state.app.userinfo;
    }
  },
import { login, logout } from "@/api/app";
const app = {
  state: {
    userinfo: {},
  },
  mutations: {
    LOGIN_USER_INFO: (state, obj) => {
      state.userinfo = obj;
    }
  },
  actions: {
    // 登錄
    doLogin({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo.username, userInfo.password)
          .then(response => {
            commit("LOGIN_USER_INFO", response.data);
            resolve(true);
          })
          .catch(error => {
            reject(error);
          });
      });
    },
//退出
    doLogout({ commit }) {
      return new Promise((resolve, reject) => {
        logout()
          .then(response => {
            resolve(response);
          })
          .catch(error => {
            reject(error);
          });
      });
    }
  }
};
export default app;

第五步:在src下創建api目錄,里面創建api.js文件內容如下,這里引入request.js是axios的東東,我這里是放在src目錄下的utils目錄里,主要用來調接口,報錯提示,設置headers里的Authorization值等,可以自行看axios的文檔即可:

import request from "_u/request";
export function login(username, password) {
  return request({
    url: "/auth/login",
    method: "post",
    data: {
      username,
      password
    }
  });
}
export function logout() {
  return request({
    url: "/auth/logout",
    method: "post"
  });
}

第六步:當你創建好后,你就可以這樣的在任何一個組件里怎么調用api:

this.$store.diapatch(‘doLogin‘,{username:‘‘,password:‘‘}).then(json=>{
  if(json.code == 0){  //做你任何的邏輯處理
    console.log(‘成功登錄‘)  
  }
})

貼出我utils目錄里的auth.js文件內容,你可以在任何一個組件里怎么調用:

import { getStorage, setStorage, removeStorage } from "@/utils/auth";
export function getStorage(key) {
  return sessionStorage.getItem(key);
}

export function setStorage(key, val) {
  return sessionStorage.setItem(key, val);
}

export function removeStorage(key) {
  return sessionStorage.removeItem(key);
}

export function getLocal(key) {
  return localStorage.getItem(key);
}

export function setLocal(key, val) {
  return localStorage.setItem(key, val);
}

export function removeLocal(key) {
  return localStorage.removeItem(key);
}

使用axios+vuex來調接口使數據隨處可用

標簽:new   用戶信息   url   port   五步   pos   iap   內容   auth   

原文地址:https://blog.51cto.com/13981400/2399144

(0)
(0)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
? 2014 吉利平特名人堂 版權所有 京ICP備13008772號-2
迷上了代碼!
黑龙江时时投注网 广东福彩快乐十分中奖规则 重庆时时彩开奖视频 棋牌娱乐下载 大赢家即时比分直 老时时彩开奖结果 双色球预测大总汇 每天计划 亚洲兴发pt第一老虎机官网 北京pk赛车20分钟一期 广东时时专家计划 广东11选5专家计划软件 百人龙虎官网 北京pk10走势 龙虎预测软件免费 微信三公游戏下载