Question

在我的 App.vue 中，我正在分派Vuex操作以从我的API中检索user，还从用户中检索role，如下所示：

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

我写了一个吸气剂，它仅向我返回保存在用户对象中的当前角色，例如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。仅当我切换路线并返回时，它才返回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);
    }
}

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

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

2 个答案: