vuex 异步加载图片

Main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store.js'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

App.vue

<template>
  <div id="app">
 
    <input type="button" value="add" @click='increment'>
    <input type="button" value="reduce" @click='decrement'>
    <input type="button" value="偶数才会点击" @click='clickOdd'>
    <input type="button" value="异步" @click='clickAsync'>
    <p>现在的数字为{{$store.state.count}} 它是{{getOdd}}</p>
    <p>经过mapGetters 接受过来的值{{count.count}}</p>
    <p><img :src=[count.imgUrl] alt=""></p>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
export default {
    computed:
      mapGetters([
        'count',
        'getOdd'
        ])
    ,
    methods:mapActions([
      'increment',
      'decrement',
      'clickOdd' ,
      'clickAsync' 
    ])
  

}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var state={
    count:10,
    fn:'hell',
    orderList:{name:'liliy'},
    imgUrl:''
}
const mutations={
    increment(state){//处理（状态）数据的变化
     state.count++
    },
    decrement(state){
     state.count--    
    }
}
const getters={
    count(state){
        return {'count':state.count,'imgUrl':state.imgUrl}
    },
    getOdd(state){
        return state.count % 2==0?'是偶数':'是奇数'
    }
}
function fn0(url){console.log('I am delay',url);state.imgUrl=url}
var fn1=function(){console.log('I am failure')}
const actions={
    increment:({//带参数（App.vue里的mapAction里定义的函数）执行
        commit //要干什么，执行时传入函数名进来，异步请求，判断，流程控制，名字不变
    })=>{
        commit('increment')//可以改名要保证和提交到mutations里的函数名一样
    },
    decrement:({
        commit
    })=>{
        commit('decrement')//后期放入actions.js里的好处是 App.vue定义了函数名,后期可以随意改变动作(放其它函数名)
    },
    clickOdd:({
        commit,state
    })=>{
        if(state.count % 2 ==0){
            commit('increment')
        }else{
            alert("是奇数不变")
        }
    },
    clickAsync:({
        commit
    })=>{
        new Promise((resolve,reject)=>{
            const a= new Image()
            a.onload=function(){
                resolve(fn0(a.src))
            }
            a.onerror=function(){
                reject(fn1())
            }
            a.src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1510800701&di=a571de8f219946d2f030c4a3817bf85e&src=http://imgsrc.baidu.com/imgad/pic/item/aa64034f78f0f736430d792a0155b319ebc4132d.jpg'
        })

    }

}
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})