Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use axios+vuex to adjust the interface". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use axios+vuex to adjust the interface".

Install: axios and vuex first

It is recommended to use: vue ui to install axios in the form of plug-ins, note that vue ui is scaffolding 3.0 began to have this, I will not introduce the installation of vuex, please install it yourself.

After the entire project is installed, it includes axios and vuex. At this time, we will simply change the project directory:

Step 1: create a new folder stores directory under the src directory, and then create the directory modules (to store the files you created) and the sibling file getters.js.

Step 2: move the store.js under the same level of main.js to the stores directory and change the name to index.js

Import Vue from "vue"; import Vuex from "vuex"; import app from ". / modules/app.js"; / / modules directory to create whatever file you want. Here I created the app.js file import getters from ". / getters"; Vue.use (Vuex); const store = new Vuex.Store ({modules: {app}, getters}); export default store

Step 3: change the import address of store.js in main.js to the following:

Import store from ". / stores"

Step 4: modify the app.js in the modules directory as follows. Here I have created two examples of login and exit using Promise. When the interface returns the data returned successfully, I can process it into state. At this time, I can use compoted to get the value in any component of the whole project. Of course, here you can use cookie or sessionStorage,localStorage to cache your user information. Here I put it in the auth.js file in the utils directory:

{{userinfo.username}} computed: {/ / how to call userinfo () {return this.$store.state.app.userinfo;}}, import {login, logout} from "@ / api/app" in any component; const app = {state: {userinfo: {},}, mutations: {LOGIN_USER_INFO: (state, obj) = > {state.userinfo = obj }, actions: {/ / Log in to 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)) });});}, / exit doLogout ({commit}) {return new Promise ((resolve, reject) = > {logout () .then (response = > {resolve (response);}) .catch (error = > {reject (error);}; export default app

Step 5: create an api directory under src, where the contents of the api.js file are as follows. Request.js is introduced here as something of axios, and I put it in the utils directory under the src directory, which is mainly used to call the interface, report an error prompt, set the authorization value in headers, and so on. You can read the axios document by yourself:

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"});}

Step 6: when you have created it, you can call api in any component like this:

This.$store.diapatch ('doLogin', {username:'',password:''}). Then (json= > {if (json.code = = 0) {/ / do any of your logic processing console.log (' login successfully')})

Post the contents of the auth.js file in my utils directory, and how can you call it in any component:

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) } Thank you for your reading. the above is the content of "how to use axios+vuex to adjust the interface". After the study of this article, I believe you have a deeper understanding of how to use axios+vuex to adjust the interface, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.