Vue mixin using Vuex for data is not causing components to update

user_1022260 0
Viewed 256

I have a vue mixin that uses the Vuex store:

const rolesMixin = {
  data: function () {
    const user = store.state.authentication.currentUser;
    return {
      isAdmin: user === null ? false : user.admin,
    };
  }
};

Vue.mixin(rolesMixin);

When I use isAdmin in a component, it does not re-render when the state changes. There must be a better way to render reactive components with a mixin, can someone point me in the right direction?

Usage:

<b-dropdown-item to="/admin/users" v-if="isAdmin">
User
</b-dropdown-item>
vuejs2 vue-component vuex vue.js
1 Answers

It's very recommended to use computed properties to get state changes :

const rolesMixin = {
  computed:{
    isAdmin(){
           const user = store.state.authentication.currentUser;

           return user === null ? false : user.admin;

    }
  }
};

Vue.mixin(rolesMixin);
user_81728570
Related