Axios - 在 vuex 操作中从 api 获取数据？

Question

如何正确传输或重写action中的函数，以接收每个相册中的第一张照片？

我的照片模特：

import { api } from "@/apis/config";
const endPoint = 'photos'
const state = {
    photos: []
}
const getters = {}
const mutations = {
    SET_PHOTOS(state, data) {
        state.photos = data
    }
}
const actions = {
    loadMore(id) {
        api.get(`photos?albumId=${id}`).then(response => {
            return response.data[0].thumbnailUrl;
        });
    }
}

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
};

还有我的专辑组件：

...
<script>
import {mapActions} from "vuex";
export default {
  name: "GridAlbums",
  props: ['album'],
  data() {
    return {
      loading: true,
      errored: false,
      photo: null
    }
  },
  mounted() {
    this.photo = this.loadMore(this.album.id)
  },
  methods: {
    ...mapActions("photos", ["loadMore"])
  }
}
</script>
...

这是我的api配置文件，其中VUE_APP_HOST是https://jsonplaceholder.typicode.com/

import axios from 'axios'

export const api = axios.create({
    baseURL: process.env.VUE_APP_HOST,
})

api.interceptors.response.use(
    response => {
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

如果您以这种方式获取数据，那么一切都会变成应有的样子：

Answer 1

尝试在 vuex 动作中添加 async / await，因为动作必须是异步的，并且存储和突变是同步的。

也可以使用 try / catch 代替 Promise 这样你的代码会更干净