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

Question

在我的App.vue中，我调度了一个Vuex操作，以从我的API中检索user以及用户的role ，如下所示：

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

我写了一个getter，它仅向我返回保存在用户对象中的当前角色，例如getRole: state => state.user_role.role

我想做的是，我想在另一个视图（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',
    })
}

这里的问题是，在第一页加载/刷新时，我undefined从getter返回。 仅当我切换路线并返回时，在这种情况下，它才返回user而不是undefined 。

我的意思是我可以在Project.vue中再次分派user/getUserRole操作，但是我想那会很不好，因为我对同一个存储/操作有多个调用。

我也试图与工作$nextTick()在我的mounted()但是这丝毫也没有帮助。

Answer 1

由于两条路由都需要相同的数据，并且用户几乎可以决定首先访问哪条路由-您可能希望在两条路由中都启动API调用，无论是否已启动特定的调用，都仅向其添加一个标志通过其他路线。

在商店状态中，您可以定义某种包含布尔属性的集合。

api_calls_ok: {
    user_data: false
}

然后，您可以定义一个与此相似的动作

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

也许像

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

在App.vue和Project.vue中，您可以在安装过程中分派getUserData ，而不必担心两次或多次调用API。 分派后，只需访问您的吸气剂即可。

Answer 2

观察计算的结果，然后在设置了用户角色后执行代码，例如：

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);
    }
}

userRole程序在userRole程序中使用immediate属性，以便在加载组件时立即调用处理程序。