在mounted监听vuex的数据并用于网络请求的解决方法

今天在写代码的时候发现一个问题并记录起来如题

假如我们有一个请求需要在mounted生命周期里面发起,然后拿到的数据渲染到页面然后发起请求的一个参数是需要从vuex里面获取的我们假设这个参数是token,这个token是要用户进行授权然后我们才能拿到

我们可以写成这样子:

export default {
data:(){
    token:''
},
 mounted() {
     //this.$watch调用后会返回一个值，就是unWatch方法
    const unWatch = this.$watch("token",newToken, oldToken) => {
     axios.get("/api/token",{
        params:{
            token:newToken
        }
        })
        .then(res => {
            unWatch(); //请求成功的时候我们注销watch就可以了
        })
    })
  }
}  

这样我们就可以等待先去请求到的token成功然后写入到vuex里面然后我们就可以在组件里面进行监听。

记录下来供大家学习参考