vue页面中丢失当前页面this数据

最新推荐文章于 2023-05-31 16:26:45 发布

原创最新推荐文章于 2023-05-31 16:26:45 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #this #数据丢失

Vue.js 专栏收录该内容

31 篇文章

订阅专栏

本文介绍在Vue项目中，由于this指向问题导致无法正确获取数据的状态，通过定义全局_this变量并在mounted生命周期钩子中赋值，从而在方法中直接使用全局_this来访问组件实例的数据属性，有效解决this指向问题。

例如：页面中含有以下数据，但是this中却没有该数据，this.userName为undefined

data: function () {
    return {
      // 导航可视状态
      visible: false,
      // 用户名
      userName: '',
      notReadMessageData: '',
      countdata: 0,
      messagevisible1: false,
      messagevisible2: false,
      messagevisible3: false,
      messagedata1: '',
      messagedata2: '',
      messagedata3: '',
      messagedropdowmvisible: false, // 未读信息是否显示
      // 下拉菜单元素数组
      dropdown: [{
        label: '修改密码',
        name: 'editPassword',
        icon: 'locked'
      }, {
        label: '退出',
        name: 'signout',
        icon: 'log-out'
      }]
    }

解决：定义全局_this,在mounted中赋值_this,方法中调用的时候直接使用全局_this

<script>
    var _this
    // 其他数据。。。
    mounted() {
        _this = this
        this.changeunreadcount()
    },
    methods: {
       changeunreadcount () {
          debugger
          if (sessionStorage.getItem('unreadAmount') || sessionStorage.getItem('unreadAmount') === 0) {
              _this.countdata = parseInt(sessionStorage.getItem('unreadAmount'))
          }
       }
    }