vuejs2.0关于用axios结合vuex开发

来源:互联网 发布:淘宝收到货后申请退款 编辑:程序博客网 时间:2024/05/19 23:11

vuex:index.js,   actions.js,     mutations.js,       getters.js

1.index.js中

import Vuex from 'vuex'import Vue from 'vue'import actions from './actions'import mutations from './mutations'import getters from './getters'Vue.use(Vuex)let state = {  user_msg: '',  bugle: ''}export default new Vuex.Store({  state,  actions,  mutations,  getters})

2.actions.js

原型导入axios,在vuex中仍然不能用,需要再次导入一遍,

import axios from 'axios'export default {  async loginGetUser ({commit,state},nameVal) {    let _this = this    let url = "http://www.xxxx.cn/test/ag/register.php?name="+nameVal    await fetch(url)      .then(res => res.json())      .then(data => {        this.commit('changUserMsg',data)      })      .catch( res => {        _this.commit('changUserMsg',{msg:'fail'})      })  },  saveForm({commit,state},url){    console.log('url.....')    console.log(url)    axios({      method:'get',      url:url    })      .then(function (data) {        console.log(data)      })      .catch(function (err) {        console.log(err)      })  }}



3.页面组件调用方法

async test(){                       let url = "http://www.xxxg.cn/test/ag/queryClothes.php";          await this.$store.dispatch('saveForm',url);        },


无关的:

mutations.js

export default {  changUserMsg ({state},data) {    this.state.user_msg =data  },  }







原创粉丝点击