在vuex中使用axios

在vuex中使用axios

贴出示例代码：

html部分：
页面index.vue（其他vue页面只需要通过mapState获取到imageData，就可以使用这个数组里的数据）
<div>
    <img :src="imageData[11]" alt="">	
</div>
<script>
import store from '@/vuex/store'
import {mapState} from 'vuex'
export default{
    name:'index',
    data(){
        return{}
    },
    computed:{
        ...mapState(['imageData'])
    },
    store,
    created(){
        //这里用vue的生命周期函数，在创建页面的时候就使用axios请求数据
        this.$store.dispatch('getInfo');
    }
}
</script>

vuex部分：
入口文件main.js
加入如下代码：
	import axios from 'axios'
	Vue.prototype.axios = axios;
//这里通过修改原型链的方式使axios全局应用
........................................
仓库代码 src/vuex/store.js

import Vue from 'vue'
import Vuex, { Store } from 'vuex'
import axios from 'axios'
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        imageData: []
    }, mutations: {
    	imageData(state, data) {
            state.imageData = data;
        }
    },actions:{
        //使用axios的get方法请求数据，并把axios封装在getInfo()中
    	getInfo(context){
    		axios.get('xxx').then(response=>{
    			context.commit('imageData',response.data.image);
                //将请求到的数据（response.data.image）作为参数，传递给imageData方法
    		}).catch(error=>{
    			console.log(error);
    			alert("网络错误，请求失败");
    		})
    	}
    }
})
......................................
context：上下文对象，是vuex的实例对象，代理了store一部分方法和属性，。
{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
......................................
getInfo()的另一种写法/commit的另一种用法
getInfo({commit}){
    axios.get('xxx').then(response=>{
    			commit('imageData',response.data.image);
    		}).catch(error=>{
    			console.log(error);
    			alert("网络错误，请求失败");
    		})
    	}

JSON数据格式：
{
  "image": [
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/a72e859b8ed518319e20a143ece13388bcf28b6.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/ea1715d988cc69ec8c0627f7607a8efc4d7d6e2.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/3c1aa7592575b0eaf107600180a7b306d8020bc.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/4e19e1bded586ce9cdf3992a46d4a39cbcec111.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/ab442adf50afb4fdbe961c6c9fffb5c412e08bf.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/73aab10c9ce166311750541f9230cae49dbfce4.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/67b8cdba248ee3041d328b795b85f1c4df2d56d.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/38b4899d6cc955da6e837ead0f341dd2f52337c.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/632a7222db7a6f94b407b646b707661d7e8a13f.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/e5a1ee879cbd88b379c47ddaeb3b7db9e4d82d5.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/37413f7921b80a1f36f7ad5ecd7be15d8c22b5b.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/cb848012394e203e0d72c97c79af0789b960ada.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/6824b957683f1d1d2a7ff89f5491ca383b2ce00.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/4a33dd1408095ee10885557b8ea2846b68414d3.jpg",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/e0fbe5724df9a42ba55a197448b40966ee78cf9.png",
    "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/a8b892d6f7a9d0f4eb19949cb2c8ddaa23e6290.png"
  ]
}

共同学习，共同进步，笔者初入前端，还在摸索阶段，如果这些总结能够提供一些帮助那最好不过，如果有错误也欢迎批评和指出。