使用 Vuex 获取数据的 Vue mixin 不会导致组件更新

Question

我有一个使用 Vuex 商店的 vue mixin：

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

Vue.mixin(rolesMixin);

当我在组件中使用isAdmin 时，它不会在状态更改时重新渲染。必须有更好的方法来使用 mixin 渲染反应组件，有人可以指出正确的方向吗？

用法：

<b-dropdown-item to="/admin/users" v-if="isAdmin">
User
</b-dropdown-item>

Answer 1

非常推荐使用计算属性来获取状态变化：

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

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

    }
  }
};

Vue.mixin(rolesMixin);