在vuex调用axios

2017-12-04 04:45:28 adsadadaddadasda 阅读数 1640

Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求





Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求

 

前言: 

Vuex 的安装将不再赘述,可以参考之前的博客 Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

使用 cnpm 安装 axios

cnpm install axios -S

安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入

为了解决这个问题,有两种开发思路,一是在引入 axios 之后,修改原型链,二是结合 Vuex,封装一个 aciton。具体的实施请往下看~

 

方案一:改写原型链

首先在 main.js 中引入 axios

import axios from 'axios'

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题

Vue.prototype.$ajax = axios

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令

复制代码
methods: {
  submitForm () {
    this.$ajax({
      method: 'post',
      url: '/user',
      data: {
        name: 'wise',
        info: 'wrong'
      }
   })
}
复制代码

 

 

方案二:在 Vuex 中封装

之前的文章中用到过 Vuex 的 mutations,从结果上看,mutations 类似于事件,用于提交 Vuex 中的状态 state

action 和 mutations 也很类似,主要的区别在于,action 可以包含异步操作,而且可以通过 action 来提交 mutations

另外还有一个重要的区别:

mutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象

action 也有一个固有参数 context,但是 context 是 state 的父级,包含  state、getters

 

Vuex 的仓库是 store.js,将 axios 引入,并在 action 添加新的方法

复制代码
// store.js
import Vue from 'Vue' import Vuex from 'vuex' // 引入 axios import axios from 'axios' Vue.use(Vuex) const store = new Vuex.Store({ // 定义状态 state: { test01: { name: 'Wise Wrong' }, test02: { tell: '12312345678' } }, actions: { // 封装一个 ajax 方法 saveForm (context) { axios({ method: 'post', url: '/user', data: context.state.test02 }) } } }) export default store
复制代码

注意:即使已经在 main.js 中引入了 axios,并改写了原型链,也无法在 store.js 中直接使用 $ajax 命令

换言之,这两种方案是相互独立的

 

在组件中发送请求的时候,需要使用 this.$store.dispatch 来分发

methods: {
  submitForm () {
    this.$store.dispatch('saveForm')
  }
}

submitForm 是绑定在组件上的一个方法,将触发 saveForm,从而通过 axios 向服务器发送请求

 

 

附录:配置 axios 

上面封装的方法中,使用了 axios 的三个配置项,实际上只有 url 是必须的,完整的 api 可以参考使用说明

为了方便,axios 还为每种方法起了别名,比如上面的 saveForm 方法等价于:

axios.post('/user', context.state.test02)

完整的请求还应当包括 .then 和 .catch

.then(function(res){
  console.log(res)
})
.catch(function(err){
  console.log(err)
})

当请求成功时,会执行 .then,否则执行 .catch

这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例

这时只要添加一个 .bind(this) 就能解决这个问题

.then(function(res){
  console.log(this.data)
}.bind(this))

Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求

 

前言: 

Vuex 的安装将不再赘述,可以参考之前的博客 Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

使用 cnpm 安装 axios

cnpm install axios -S

安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入

为了解决这个问题,有两种开发思路,一是在引入 axios 之后,修改原型链,二是结合 Vuex,封装一个 aciton。具体的实施请往下看~

 

方案一:改写原型链

首先在 main.js 中引入 axios

import axios from 'axios'

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题

Vue.prototype.$ajax = axios

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令

复制代码
methods: {
  submitForm () {
    this.$ajax({
      method: 'post',
      url: '/user',
      data: {
        name: 'wise',
        info: 'wrong'
      }
   })
}
复制代码

 

 

方案二:在 Vuex 中封装

之前的文章中用到过 Vuex 的 mutations,从结果上看,mutations 类似于事件,用于提交 Vuex 中的状态 state

action 和 mutations 也很类似,主要的区别在于,action 可以包含异步操作,而且可以通过 action 来提交 mutations

另外还有一个重要的区别:

mutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象

action 也有一个固有参数 context,但是 context 是 state 的父级,包含  state、getters

 

Vuex 的仓库是 store.js,将 axios 引入,并在 action 添加新的方法

复制代码
// store.js
import Vue from 'Vue' import Vuex from 'vuex' // 引入 axios import axios from 'axios' Vue.use(Vuex) const store = new Vuex.Store({ // 定义状态 state: { test01: { name: 'Wise Wrong' }, test02: { tell: '12312345678' } }, actions: { // 封装一个 ajax 方法 saveForm (context) { axios({ method: 'post', url: '/user', data: context.state.test02 }) } } }) export default store
复制代码

注意:即使已经在 main.js 中引入了 axios,并改写了原型链,也无法在 store.js 中直接使用 $ajax 命令

换言之,这两种方案是相互独立的

 

在组件中发送请求的时候,需要使用 this.$store.dispatch 来分发

methods: {
  submitForm () {
    this.$store.dispatch('saveForm')
  }
}

submitForm 是绑定在组件上的一个方法,将触发 saveForm,从而通过 axios 向服务器发送请求

 

 

附录:配置 axios 

上面封装的方法中,使用了 axios 的三个配置项,实际上只有 url 是必须的,完整的 api 可以参考使用说明

为了方便,axios 还为每种方法起了别名,比如上面的 saveForm 方法等价于:

axios.post('/user', context.state.test02)

完整的请求还应当包括 .then 和 .catch

.then(function(res){
  console.log(res)
})
.catch(function(err){
  console.log(err)
})

当请求成功时,会执行 .then,否则执行 .catch

这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例

这时只要添加一个 .bind(this) 就能解决这个问题

.then(function(res){
  console.log(this.data)
}.bind(this))

Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求

 

前言: 

Vuex 的安装将不再赘述,可以参考之前的博客 Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

使用 cnpm 安装 axios

cnpm install axios -S

安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入

为了解决这个问题,有两种开发思路,一是在引入 axios 之后,修改原型链,二是结合 Vuex,封装一个 aciton。具体的实施请往下看~

 

方案一:改写原型链

首先在 main.js 中引入 axios

import axios from 'axios'

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题

Vue.prototype.$ajax = axios

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令

复制代码
methods: {
  submitForm () {
    this.$ajax({
      method: 'post',
      url: '/user',
      data: {
        name: 'wise',
        info: 'wrong'
      }
   })
}
复制代码

 

 

方案二:在 Vuex 中封装

之前的文章中用到过 Vuex 的 mutations,从结果上看,mutations 类似于事件,用于提交 Vuex 中的状态 state

action 和 mutations 也很类似,主要的区别在于,action 可以包含异步操作,而且可以通过 action 来提交 mutations

另外还有一个重要的区别:

mutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象

action 也有一个固有参数 context,但是 context 是 state 的父级,包含  state、getters

 

Vuex 的仓库是 store.js,将 axios 引入,并在 action 添加新的方法

复制代码
// store.js
import Vue from 'Vue' import Vuex from 'vuex' // 引入 axios import axios from 'axios' Vue.use(Vuex) const store = new Vuex.Store({ // 定义状态 state: { test01: { name: 'Wise Wrong' }, test02: { tell: '12312345678' } }, actions: { // 封装一个 ajax 方法 saveForm (context) { axios({ method: 'post', url: '/user', data: context.state.test02 }) } } }) export default store
复制代码

注意:即使已经在 main.js 中引入了 axios,并改写了原型链,也无法在 store.js 中直接使用 $ajax 命令

换言之,这两种方案是相互独立的

 

在组件中发送请求的时候,需要使用 this.$store.dispatch 来分发

methods: {
  submitForm () {
    this.$store.dispatch('saveForm')
  }
}

submitForm 是绑定在组件上的一个方法,将触发 saveForm,从而通过 axios 向服务器发送请求

 

 

附录:配置 axios 

上面封装的方法中,使用了 axios 的三个配置项,实际上只有 url 是必须的,完整的 api 可以参考使用说明

为了方便,axios 还为每种方法起了别名,比如上面的 saveForm 方法等价于:

axios.post('/user', context.state.test02)

完整的请求还应当包括 .then 和 .catch

.then(function(res){
  console.log(res)
})
.catch(function(err){
  console.log(err)
})

当请求成功时,会执行 .then,否则执行 .catch

这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例

这时只要添加一个 .bind(this) 就能解决这个问题

.then(function(res){
  console.log(this.data)
}.bind(this))
2018-09-26 18:19:11 qq_39692256 阅读数 2708

在vue项目中,组件间相互传值、后台获取的数据需要供多个组件使用的情况,有必要考虑引入vuex来管理这些凌乱的状态。

首先新需要在项目中安装vuex:

命令行 npm install vuex    - - save  - dev

在项目的入口 js 文件 main.js 中引入

import store from './store';

并将 store 挂载到 vue 上

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

创建store目录结构(根据需求繁或简)

store下index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import userStore from './userInfo/'

const store = new Vuex.Store({
  modules: {
  	userStore,
  }
})

export default store

 

userInfo下index.js

import axios from 'axios'
const userStore = {
    state: {
		user: {
			name: '',
		}
    },
    getters: {},
    mutations: {
        setUser(state, payload){
            state.user.name = payload
        },
    },
    actions: {
    	getName({commit}){
             axios.get(url, params)
                .then(response => {
                    commit("setUser",res.name);
                })
                .catch((error) => {
                    console.log(error)
                })
	    }
    },
    //plugins: [createPersistedState()]
}

export default userStore

使用vuex的组件中进行分发

mounted () { this.$store.dispatch('getName') },
//created或者mounted周期都可以

需要取回 state 的组件中使用 mapState 获取 state:

import { mapState } from 'vuex';

export default {
  ...
  computed: {
    ...mapState([
       name: state => state.userStore.user.name
    ])
  },
  ...      
}

 

2018-07-25 16:45:28 abcde158308 阅读数 4185

vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅。

整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上

首先新需要在项目中安装vuex:

运行命令 npm install vuex --save-dev

在项目的入口js文件main.js中

import store from './store/index'

并将store挂载到vue上

复制代码

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

复制代码

 

然后看下整个store的目录结构,modules文件夹用来将不同功能也面的状态分成模块,index.js文件夹是store的入口文件,types文件夹是定义常量mutation的文件夹

整个vuex的目录结构如下:

这里我新建了文件夹fetch用来编写所有的axios处理和axios封装

在fetch文件夹下新建api.js文件:

复制代码

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 {
  // 获取我的页面的后台数据
  mineBaseMsgApi() {
     alert('进入api.js')
    return fetch('/api/getBoardList');
  }
}

复制代码

在store的入口文件index.js中:

复制代码

import Vue from 'vue'
import Vuex from 'vuex'

import mine from './modules/mine';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    mine
  }
});

复制代码

在你需要请求后台数据并想使用vuex的组件中的created分发第一个dispatch:

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

然后在store/modules下的对应模块js文件中,这里我使用的mine.js文件中编写state、action和mutation

复制代码

import api from './../../fetch/api';
import * as types from './../types.js';

const state = {
  getMineBaseMsg: {
    errno: 1,
    msg: {}
  }
}

const actions = {
  getMineBaseApi({commit}) {
    alert('进入action');
    api.mineBaseMsgApi()
    .then(res => {
        alert('action中调用封装后的axios成功');
        console.log('action中调用封装后的axios成功')
        commit(types.GET_BASE_API, res)
    })
  }
}

const getters = {
  getMineBaseMsg: state => state.getMineBaseMsg
}

const mutations = {
  [types.GET_BASE_API](state, res) {
    alert('进入mutation');
    state.getMineBaseMsg = { ...state.getMineBaseMsg, msg: res.data.msg }
    alert('进入mutations修改state成功');
  }
}

export default {
  state,
  actions,
  getters,
  mutations
}

复制代码

然后在想取回state的组件中使用mapGetters获取state:

复制代码

import { mapGetters } from 'vuex';

export default {
  ...
  computed: {
    ...mapGetters([
      'getMineBaseMsg'
    ])
  },
  ...      
}

复制代码

然后在控制台查看把:

getter和mutation都已经成功了,同时我在提交state的整个过程都添加了alert,大家可以看看整个流程是如何走的;

 

2017-08-11 23:42:43 oxgos 阅读数 6711

安装就不说了,可以看看我之前的文章.

首先,先说说axios的引入有两种方式:

第一种:

在Vue的原型链prototype上定义:如图

调用时,直接在组件里用this.$ajax调用

这种方式需要actions里引入Vue实例

 

说第二种方式:更加多的axios设置及拦截器,则需创建axios实例并配置

fetch.js

之后我们就可以在vuex的actions里调用:

 

2019-05-14 10:38:05 Sakura_Codeboy 阅读数 687

在学习某课网模仿美团的视频中,在安装时nuxt会出现无法安装@/nuxt/axios的情况,而在vuex中无法直接调用axios,因为this无法指向vue,所以我找了几种比较好的方法来解决这个问题,因为这些文章大概内容都差不多,我只是总结了一个自己觉得比较好的办法
//在main.js中引入vuex的入口文件
import store from ‘./store/index.js’;

new Vue({
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
})

// store/index.js
// 使用vuex重新封装一个actions
import Vue from ‘vue’;
import Vuex from ‘vuex’;
import axios from “axios”;

Vue.use(Vuex);

const store = new Vuex.Store({
state: {
data: {}
},
mutations: {
changeData (data) {
state.data = data
}
},
actions: {
axios.get(XXX).then(res => {
data = res.xxx.xxx
})
commit(‘路径’,status === 200 ? data: [])//判断请求是否成功,成功返回data失败返回[]
}
})

export default store;

// 需要用到vuex的vue组件
import {mapActions} from ‘vuex’
computed: {
  data () {
    return this.$store.state.data;
  }
},
methods:mapActions([
‘abc’
])
}

详讲:vue2+vuex+axios

阅读数 22397