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

Posted 2023-03-16

【中文标题】如何将 api 的结果与来自 Vuex 的操作一起使用

【英文标题】：How to use result of api with actions from Vuex

【发布时间】：2021-10-23 14:38:04

【问题描述】：

当用户登录时，我正在尝试通过 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>

【参考方案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()
   



);

【讨论】：

哦，好的，我现在明白了！如何动态监听显示它而不是“挂载”钩子？

你可以使用像@click="getFavorites"这样的事件来调度它

登录时，我使用突变来存储用户 ID。只有设置了这个，我才需要检索收藏夹

您可以使用我在编辑后的答案中提到的观察者

这么简单.. 好吧，我想我必须了解更多有关访问数据的知识，谢谢老兄！