Vue+vuex+axios retrieve data from the background into Vuex, sharing data between components

It is necessary to consider introducing Vuex to manage the messy state of the data passing through the components in the Vue project, or for the back-end of the database to be used by multiple components, and today this blog is used to record the entire process, and the backend API interface is the interface using Webpack-server simulation. As mentioned in the previous article, it is necessary to go through the pages.

The whole process is to commit the dispatch in the component's created, and then invoke an encapsulated Axios through action and then trigger the mutation to commit the state to change the data in the states, and then get the data in the component's computed properties and render it on the page

The first new need to install Vuex in your project:

Run the command npm install Vuex--save-dev

At the entry of the project JS file main. JS in

Import store from './store/index '

and mount the store on the Vue.

New Vue ({  el: ' #app ',  router,  store,  Template: ' <App/> ',  render: (createelement) = CreateElement (APP)})

Here I create a new folder fetch to write all the Axios processing and Axios packages

Create a new API under the Fetch folder. JS file:

Import Axios from ' Axios 'Exportfunctionfetch (URL, params) {return NewPromise (Resolve, reject) ={axios.post (URL, params). Then (response={alert (' Api--ok ');            Resolve (Response.data); })            .Catch(Error) ={console.log (Error) Reject (Error)})})} Exportdefault {  //Get background data for my pageMinebasemsgapi () {alert (' Enter Api.js ')    returnFetch ('/api/getboardlist '); }}

The entry file at the store index. JS in:

Import vue from ' Vue ' import Vuex from ' Vuex ' import mine from './modules/mine '; Vue.use (VUEX); export default New Vuex.store ({  modules: {    mine  }});

Distribute the first dispatch in the created you need to request background data and want to use Vuex's components:

Created () {this    . $store. Dispatch (' Getminebaseapi ');  }

Then in the corresponding module JS file under Store/modules, here I use the mine. JS file to write State, action, and mutation

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 = (        "Axios succeeded in calling encapsulated" in "action");        Console.log (' action ' calls the encapsulated Axios success ')        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 (' Enter mutations to modify state success ');}  } Export default {state  ,  actions,  getters,  mutations}

Then use Mapgetters to get state in the component that wants to retrieve state:

Import {mapgetters} from ' Vuex '; export default {  ...  computed: {    ... mapgetters ([      ' getminebasemsg '    )  },  ...      }

Then in the console view put:

Getter and mutation have been successful, and I have added alert to the whole process of submitting State, so you can see how the whole process is going.

Source: http://www.cnblogs.com/jasonwang2y60/

　　

　

　　

　　

Vue+vuex+axios retrieve data from the background into Vuex, sharing data between components