Vuex：安装钩中的吸气剂返回

Question

In my App.vue I am dispatching a Vuex action to retrieve a user from my API and also the role of the user like this:

async mounted() {
    const userToken = localStorage.getItem('token');
    await this.getUserRole(userToken);
    await this.getUserImage(userToken);
  },

I wrote a getter that only returns me the current role that is saved in the user object like this getRole: state => state.user_role.role

What I want to do is, that I want to dispatch an action regarding the user role in another view (Projects.vue):

async mounted() {
    console.log(this.$store.getters['user/getRole']);
    console.log(this.userRole);

    if (this.userRole === 'user') {
      // do things ...
    }
}
computed: {
    ...mapGetters('user', {
      user: 'getUser',
      userRole: 'getRole',
    })
}

The problem here is that at the first page load/refresh I get undefined back from my getter. Only if I switch the route and come back, it returnes me in this case user instead of undefined .

I mean I could dispatch the user/getUserRole action again in my Project.vue but I guess that would be bad as I have multiple calls for the same store/action.

I also tried to work with $nextTick() in my mounted() but this did also not help.

Answer 1

Since both routes need the same data, and the user can pretty much decide what route to access first -- you might want to initiate the API call in both routes, only adding a flag to it whether or not the specific call has already been initiated by other routes.

In your store states, you can define some sort of collection that holds boolean properties.

api_calls_ok: {
    user_data: false
}

Then you can define an action that does similar to this

const userToken = localStorage.getItem('token'); //side note: you can use localStorage.token instead
await this.getUserRole(userToken);
await this.getUserImage(userToken);

Maybe something like

getUserData({ commit, state }){
    if(!state.api_calls_ok.user_data){
        dispatch('getUserRole');
        dispatch('getUserImage');
        commit('flagApiCalls', 'user_data', true); //set the boolean to true
    }
}

In App.vue and Project.vue, you can just dispatch the getUserData during mount and not worry about calling the API twice or more. After dispatching, just access your getter.

Answer 2

Watch the computed, and then execute the code once the user role is set, for example:

computed: {
    ...mapGetters('user', {
      user: 'getUser',
      userRole: 'getRole',
    })
},

watch: {
    userRole: {
        handler(role) {
             if (role) {
                 this.yourAction();
             }
        },
        immediate: true
    }
},

methods: {
    yourAction() {
        console.log('got role:', this.userRole);
    }
}

The immediate property is used within the watcher for userRole so that the handler will be called immediately when the component is loaded.