Блог

Я пытаюсь извлечь избранное пользователя с помощью 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>
 

Вам нужно отправить действие в установленный крюк:

 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()
   }
}

}
});