vuex 中的 Getters 在操作之前被调用

Question

我正在使用 vuex，在我的设置中我先调用 dispatch 然后 getter。当我刷新我的页面时，getter 总是首先被调用，我不确定如何使用 async await 进行更改，所以 getter 只会触发操作被调用。

这是我在 .vue 文件中的设置

setup(props: any, context: any) {
    const store: any = useStore()
    store.dispatch('teams/getTeams')
    let teams = computed(() => store.getters['teams/teams']) as any;
}

这是我的 actions.ts 文件

    import Http from "@/helpers/Http";
    
    export const actions = {
        async getTeams({ commit, dispatch}: any) {
            const http = new Http();
            const response = await http.get(`/api/teams`)
            commit('setTeams', response)
        }
    }

Here is the Http.ts


import axios from 'axios'

export default class Http {    
  async put(url: string, data: any) {
    const response = await axios.put(url, data)
    if(response.data){
      return response.data 
    }else{
      return response.status;
    }
  }
}

这里是mutations.ts

export const mutations = {
  setTeams(state: any, teams: any) {
    state.teams = teams
  }
}

这里是getters.ts

export const getters = {
  teams: (state: any): any => {
    console.log("In getters")
    return state.teams
  }
}

我要更改什么才能使 getters 调用仅在调度调用后触发？

Answer 1

操作是异步的。如果你想等待动作被解决，你可以使用异步等待。看这个例子（没有合成API）：

"component.vue"

methods: {
    async getTeam(){
       await this.$store.dispatch('teams/getTeams')
       let teams = computed(() => store.getters['teams/teams']) as any;
    }
}

如果您想捕捉 api 响应，可以从操作中 return 它。

"component.vue"

methods: {
    async getTeam(){
       data = await this.$store.dispatch('teams/getTeams')
       ....
    }
}

像“store/teams.js”这样的动作示例

export const actions = {
   async getTeams(){
        const http = new Http();
        const response = await http.get(`/api/teams`)
        return response
   }
}

vuex 中的 Getters 在操作之前被调用

Getters in vuex is being called before actions

async-await

vuex

vuejs3