Vuex：在挂载的钩子中返回吸气剂答案

【问题标题】：Vuex: Return getter in mounted hookVuex：在挂载的钩子中返回吸气剂
【发布时间】：2019-11-17 20:09:42
【问题描述】：

在我的 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',
    })
}

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

我的意思是我可以在我的 Project.vue 中再次发送 user/getUserRole 操作，但我想这会很糟糕，因为我对同一个商店/操作有多个调用。

我也尝试在我的mounted() 中使用$nextTick()，但这也没有帮助。

【问题讨论】：

标签： javascript vue.js async-await vuex

【解决方案1】：

观察计算，一旦设置了用户角色，然后执行代码，例如：

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 的观察程序中使用，以便在加载组件时立即调用处理程序。

【讨论】：

【解决方案2】：

由于两个路由都需要相同的数据，并且用户几乎可以决定首先访问哪个路由 - 您可能希望在两个路由中启动 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 两次或更多次。调度后，只需访问您的 getter。

【讨论】：