vue从后台中获取数据

发布时间:2022-08-19 12:07

1. 在接口函数中定义(api/index.js):(切记一定是没有{},否则就参数错误啦)

// export const reqShopList=({geohash,keyword})=>ajax(base_url+'/search_shops',{geohash, keyword})
 export const reqShopList=(geohash,keyword)=>ajax(base_url+'/search_shops',{geohash, keyword})

2.在mutation-type里定义:

export const RECEIVE_SEARCH_SHOPS='receive_search_shops'//接收搜索的商家数组

3. 在mutation里:
 

[RECEIVE_SEARCH_SHOPS](state, {
        searchshops
    }) {
        state.searchshops = searchshops;
    },

4. 在action里:(接收参数)

async searchShopGoods({
        commit
    ,state},keyword) {
        const geohash = state.latitude + ',' + state.longitude;
        const result = await reqShopList(geohash,keyword)
        if (result.code === 0) {
            const searchShops = result.data
            commit(RECEIVE_SEARCH_SHOPS, {
                searchShops
            })
            // 如果组件中传递了接收消息的回调函数, 数据更新后, 调用回调通知调用的组件
            // callback && callback()
        }
    },

5. 在需要信息的vue文件里:
 

search(){
      //得到搜索关键字
      const keyword=this.keyword.trim();
      //进行搜索
      if(keyword){
        this.$store.dispatch('searchShopGoods',keyword)
        
      }
    }

6. 显示数据

vue从后台中获取数据_第1张图片

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号