Vuex中在created钩子调用action并等待执行完成后获取结果可行吗？

你的思路完全没问题——在created钩子中调用Vuex action并等待它执行完成后再处理结果，只是你没正确处理异步流程。

问题根源 #

你在created里直接调用this.FETCH_USER()后立刻打印this.GET_USER，但FETCH_USER是异步操作（不管用不用async/await），这时候action还没执行完，mutation还没更新state，所以GET_USER自然还是初始的null。

修正方案 #

1. 把组件的created改成异步函数，等待action执行完成

组件代码修改如下：

created() {
  // 封装成异步方法，更清晰
  this.initUser()
},
methods: {
  ...mapActions([ 'FETCH_USER' ]),
  async initUser() {
    await this.FETCH_USER()
    // 现在action已执行完毕，state更新完成，能拿到正确结果
    console.log(this.GET_USER)
  },
  login() {
    if(this.$refs.form.validate()) {
      console.log('welcome')
    }
  }
},
computed: {
  ...mapGetters([ 'GET_USER' ])
}

或者直接把created定义成async函数：

async created() {
  await this.FETCH_USER()
  console.log(this.GET_USER)
},

2. 优化Vuex action的async/await写法（可选但更清晰）

你写法一里的await和.then()混用了，其实可以简化成纯async/await风格，可读性更好：

actions: {
  async FETCH_USER({commit}) {
    const res = await firebase.firestore().collection('test').get()
    commit('FETCH_USER', res.docs[0].data())
  }
}

为什么这样能解决问题 #

• async/await会让异步代码同步化执行：await this.FETCH_USER()会暂停created（或initUser）函数的执行，直到FETCH_USER这个异步action完成。
• 只有当action里的Firestore请求完成、mutation更新了state之后，才会执行后面的console.log(this.GET_USER)，这时候GET_USER已经能拿到最新的state值了。

内容的提问来源于stack exchange，提问作者Mercore