LQ博客 www.lqblogs.com
arrows
nav

vue mounted 钩子函数中获取不到vuex数据的两种场景,一是正常加载,二是浏览器刷新

作者:LQ 来源:原创 发布时间:2021-09-04 浏览量:42 评论:0 点赞:0

store.js

import api from '../../api/program'

const state = {
    program: {
        list: [],
        detail: {}
    }
}

// detail 模拟数据
// detail = {title: '', desc: '', content: '', created: '', updated: ''}

const getters = {
    detail: state => state.program.detail
}

const mutations = {
    GET_PROGRAM_DETAIL (state, res) {
        state.program.detail = res
    }
}

const actions = {
    getProgramDetail( { commit } ) {
        api.getProgramDetail(res => {
            commit('GET_PROGRAM_DETAIL', res)
        })
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}

Program/detial.vue

<template>省略。。。</template>

<script>
import { mapGetters } from 'vuex'

export.default {
 data() {
    return {
      省略。。。
    }
 },
 watch: {
    detail() {
      this.handleInit()
    }
 },
 computed: {
    ...mapGetters(['detail']),
 },
 mounted () {
    const self = this;
    // 正常加载,这里可以输出detail数据,浏览器刷新就不行,必须通过watch监听来实现回调
    console.log(self.detail.title)
    self.handleInit()
 },
 methods: {
    handleInit() {
      const self = this
      // 正常加载和浏览器刷新后都可以实现
      console.log(self.detail.title)
    },
  }
}
<script>

<style scoped>省略。。。</style>


总结: 首次打开页面时,mounted可以通过mapGetters实时获取detail数据,但通过浏览器强制刷新时,由于detail数据是通过api接口异步回调的,所以mounted此时输出是拿不到detail数据,而是直接输出undefind,因此通过watch监听detail变化来回调实现。

Vue
如果你感觉本文章对你有帮助的话,那就点赞、打赏或订阅一下吧
点赞(0)
打赏
倒踩(0)
关闭 感谢您的支持,我会继续努力
微信支付
支付宝支付
扫码打赏,建议金额1-20元
浏览量(42)
讨论本篇文章(0)
发表评论

最多访问文章

最新文章