Vue + vuex + axio obtains data from the backend and stores it in vuex to share data between components. axiovuex

Vue + vuex + axio obtains data from the backend and stores it in vuex to share data between components. axiovuex

In vue projects, there are many situations where data transmitted between components or retrieved from the backend needs to be used by multiple components. It is necessary to consider introducing vuex to manage these messy states, today's blog post is used to record this entire process. The backend api uses the webpack-server simulated interface. As mentioned in the previous article, you can refer to the interface you need.

The whole process is to submit dispatch in the created component, then call an encapsulated axios through action, and then trigger mutation to submit data in the state change state, then, get the state data in the calculation attribute of the component and render it on the page.

First, install vuex in the project:

Run commands

npm install vuex --save-dev

In the project's entry is file main. js

import store from './store/index'

And mount the store to the vue.

new Vue({ el: '#app', router, store, template: '<App/>', render: (createElement) => createElement(App)})

Next, let's take a look at the directory structure of the entire store. The modules folder is used to divide the statuses of different functions into modules. The index. js folder is the entry file of the store, and the types folder is the folder that defines the constant mutation.

The directory structure of the whole vuex is as follows:

Here, I created a folder named fetch to write all axios processing and axios encapsulation.

Create an api. js file in the fetch Folder:

Import axios from 'axios 'export function fetch (url, params) {return new Promise (resolve, reject) =>{ axios. post (url, params ). then (response => {alert ('api -- OK '); resolve (response. data );}). catch (error) => {console. log (error) reject (error)} export default {// obtain the background data of my page mineBaseMsgApi () {alert ('enter the api. js ') return fetch ('/api/getBoardList ');}}

In the index. js file of the store entry file:

import Vue from 'vue'import Vuex from 'vuex'import mine from './modules/mine';Vue.use(Vuex);export default new Vuex.Store({ modules: {  mine }});

When you need to request background data and want to use the created component of vuex to distribute the first dispatch:

created() {  this.$store.dispatch('getMineBaseApi'); }

Then, in the js file of the corresponding module under store/modules, write state, action, and mutation in the mine. js file I use here.

Import api from '. /.. /.. /fetch/api '; import * as types from '. /.. /types. js'; const state = {getMineBaseMsg: {errno: 1, msg :{}} const actions = {getMineBaseApi ({commit}) {alert ('enter Action '); api. mineBaseMsgApi (). then (res => {alert ('axios success after calling in Action'); console. log ('axios succeeded after calling the encapsulated in Action') commit (types. GET_BASE_API, res)} const getters = {getMineBaseMsg: state => state. getMineBaseMsg} const mutations = {[types. GET_BASE_API] (state, res) {alert ('enter mutation'); state. getMineBaseMsg = {... state. getMineBaseMsg, msg: res. data. msg} alert ('mutations modified successfully');} export default {state, actions, getters, mutations}

Then, use mapgetters in the component to retrieve the state to get the state:

import { mapGetters } from 'vuex';export default { ．．． computed: {  ...mapGetters([   'getMineBaseMsg'  ]) }， ．．．   ｝

Then you can view the following in the console:

Getter and mutation are both successful. At the same time, alert is added during the entire state submission process. You can see how the entire process goes.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.