javascript - Vuex: Return getter in mounted hook - Stack Overflow

admin管理员组

文章数量:1398763

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 ...
    }
}
puted: {
    ...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 e 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.

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 ...
    }
}
puted: {
    ...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 e 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.

• javascript
• vue.js
• async-await
• vuex

Share Improve this question Follow asked Jul 8, 2019 at 10:12 mrksmrks 5,6311313 gold badges5959 silver badges8080 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

puted: {
    ...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 ponent is loaded.

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({ mit, state }){
    if(!state.api_calls_ok.user_data){
        dispatch('getUserRole');
        dispatch('getUserImage');
        mit('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.

本文标签： javascriptVuex Return getter in mounted hookStack Overflow