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

最新推荐文章于 2025-01-13 21:44:27 发布

原创最新推荐文章于 2025-01-13 21:44:27 发布 · 829 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Vue.js 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何在VueJS2.0项目中使用Axios与Vuex进行集成，强调了在index.js中导入Axios的重要性，并提到了页面组件如何调用相关方法。虽然mutations.js的内容未详述，但可以理解为Vuex状态管理的一部分。

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
  },
  
}