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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.