vue.js - 如何将 api 的结果与来自 Vuex 的操作一起使用

Question

当用户登录时，我正在尝试通过 axios 检索用户的收藏夹。为此，我将 Vuejs 与 Vuex 一起使用。关于日志记录过程的所有内容都可以，但是关于收藏夹，我遗漏了一些东西，但我不知道是什么。

我store.ts是这样的：

export const store = createStore({
    state: {
        user: null,
        token: null,
        favorites: []
    },

    mutations: {
        setUser(state, user) {
            state.user = user;
        },
        setToken(state, token) {
            state.token = token;
        },
        setFavs(state, favorites) {
            state.favorites = favorites;
        },
    },
    actions: {
        getFavorites({ commit }) {
            axios
                .post("URL_HERE", {
                    userId: this.state.user,
                })
                .then((res) => {
                    //console.log(res);
                    commit('setFavs', res.data)

                })
                .catch((error) => {
                    console.log(error);
                })
        }
    },
    getters: {
        getFavs: (state) => state.favorites
    },
});

在我的收藏夹组件中，我有：

export default defineComponent({
  name: "Favorites",
  data() {
    return {
      favorites: null,
    };
  },
  computed: {
    ...mapGetters(["isLoggedIn"]),
    ...mapGetters({ Favorites: "getFavs" }),
  },
});

然后在模板中：

<div v-for="favorite in Favorites" :key="favorite.event_id">
 <li>{{ favorite }}</li>
</div>

Answer 1

您需要在挂载的钩子中调度操作：

export default defineComponent({
  name: "Favorites",
  data() {
    return {
      favorites: null,
    };
  },
  computed: {
    ...mapGetters(["isLoggedIn"]),
    ...mapGetters({ Favorites: "getFavs" }),
  },
 methods:{
  ...mapActions(['getFavorites'])//map the actions as you did with getters
 },
 mounted(){
  this.getFavorites();//dispatch the action
},
//or use a watcher
watch:{
isLoggedIn(newVal,oldVal){
  if(newVal){
        this.getFavorites()
   }
}

}
});