如何在Vuex中使用Action调用API获取结果 以获取用户收藏为例

1. 核心问题点 #

• Vuex Action中状态获取错误：Action的第一个参数是context对象，不能通过this.state拿全局状态，要从context里解构state，且如果你的user字段是用户对象，需要取对应的用户ID字段（比如user.id）而不是直接传整个user对象作为接口参数
• 未主动触发getFavorites Action：收藏组件仅映射了getter，没有在合适的时机（比如组件挂载、登录状态变更时）调用Action拉取接口数据
• 大概率缺少请求鉴权配置：用户登录后的接口请求一般需要在请求头携带token，当前axios请求没有加对应配置，很可能被后端鉴权拦截
• 缺少必要的状态判断：store中没有定义你映射的isLoggedIn getter，且模板没有加非空判断，初始状态下容易出现异常展示

2. 代码修改示例 #

2.1 修改store.ts代码 #

import axios from 'axios'
export const store = createStore({
    state: {
        user: null,
        token: null,
        favorites: []
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
        },
        setToken(state, token) {
            state.token = token;
            // 全局配置axios请求头携带token，避免每次请求单独配置
            localStorage.setItem('token', token)
            axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
        },
        setFavs(state, favorites) {
            state.favorites = favorites;
        },
    },
    actions: {
        // 从context中解构出state拿用户信息
        getFavorites({ commit, state }) {
            if (!state.user?.id) return // 无用户ID时直接返回，避免发起无效请求
            axios
                .post("URL_HERE", {
                    userId: state.user.id, // 按你实际的用户ID字段名调整
                })
                .then((res) => {
                    commit('setFavs', res.data)
                })
                .catch((error) => {
                    console.log('获取收藏列表失败：', error);
                })
        }
    },
    getters: {
        getFavs: (state) => state.favorites,
        // 补全你用到的isLoggedIn getter
        isLoggedIn: (state) => !!state.token && !!state.user
    },
});

2.2 修改收藏组件代码 #

import { mapGetters, mapActions } from 'vuex'
export default defineComponent({
  name: "Favorites",
  computed: {
    ...mapGetters(["isLoggedIn", "getFavs"]),
  },
  methods: {
    ...mapActions(["getFavorites"])
  },
  mounted() {
    // 组件挂载时如果已登录，直接拉取收藏列表
    if (this.isLoggedIn) {
      this.getFavorites()
    }
  },
  watch: {
    // 监听登录状态，用户登录后自动拉取收藏列表
    isLoggedIn(newVal) {
      if (newVal) {
        this.getFavorites()
      }
    }
  }
});

2.3 修改模板代码 #

<!-- 增加状态判断，避免异常展示 -->
<div v-if="isLoggedIn && getFavs.length" v-for="favorite in getFavs" :key="favorite.event_id">
 <li>{{ favorite }}</li>
</div>
<p v-else-if="isLoggedIn && !getFavs.length">暂无收藏内容</p>
<p v-else>请先登录后查看收藏</p>

内容的提问来源于stack exchange，提问作者Jean R.