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

最新推荐文章于 2024-09-14 18:41:47 发布

原创最新推荐文章于 2024-09-14 18:41:47 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #watch #mouted #vuex

问题的解决方案同时被 2 个专栏收录

7 篇文章

订阅专栏

Vue

2 篇文章

订阅专栏

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

假如我们有一个请求需要在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里面然后我们就可以在组件里面进行监听。