美文网首页
vue局部刷新问题,keepAlive&activated使用

vue局部刷新问题,keepAlive&activated使用

作者: 追风筝的Hassan | 来源:发表于2019-07-05 19:50 被阅读0次

    起源:列表页-》详情页,点击返回列表页数据不刷新

    问题:钉钉微应用开发,头部有添加按钮和标题,当页面不刷新时,同时标题和按钮也不再显示。

    前提:列表页已经做了keepAlive缓存页面,并且进入列表页的有两个场景,详情页返回&新增页面返回

    1.利用路由守卫和store进行解决

    //list,列表页
    computed: {
         showAddbtn () { // 显示添加按钮
           return this.$store.getters.count
         }
      },
     watch: {
         showAddbtn () {
           dd.ready(() => {
            // 获取动态标题
            this.$store.dispatch({
               type: 'dingtalk/setViewTitle',
               title: this.moduleTitle // 显示为当前的模块名称
            })
            this.moduleTitle = localStorage.getItem('moduleTitle')
           })
          this.onInsert()
         },
    }
    
    

    利用store的count的状态的变化,引起局部刷新,从而再次添加标题和按钮

    //详情页中
     beforeRouteLeave (toRoute, fromRoute, next) {
        if (toRoute.name === 'customerList') {
           this.$store.dispatch('common/setCount')
    }
    next()
    }
    
    //新增页面
     beforeRouteLeave (toRoute, fromRoute, next) {
         this.$store.dispatch('common/setCount')
        next()
      }
    

    问题:因为新增页面添加之后会跳转到详情页之中,再点击详情页的返回,相当于同时触发了两次count那么list之中就会重置两次标题,运行时会出现,保存成功之后直接执行详情页中的标题设置,然后再执行列表中的标题设置,导致详情页显示的是列表页的标题。

    2.利用eventHub


    main.js
    //main.js
    beforeRouteLeave (toRoute, fromRoute, next) {
        // this.$store.dispatch('common/setCount')
        let addbutton
        addbutton++
        this.$root.eventHub.$emit('addButton', addbutton)
        next()
      }
    
    
    //详情页
     beforeRouteLeave (toRoute, fromRoute, next) {
        if (toRoute.name === 'customerList') {
       let addbutton
        addbutton++
          this.$root.eventHub.$emit('addButton', addbutton)
          next()
        }
    
    //列表页接收
     this.$root.eventHub.$on('addButton', (addButton) => {
          dd.ready(() => {
            // 获取动态标题
           this.$store.dispatch({
             type: 'dingtalk/setViewTitle',
             title: this.moduleTitle // 显示为当前的模块名称
            })
            this.moduleTitle = localStorage.getItem('moduleTitle')
            this.onInsert()
          })
        })
    

    以上为完全测试,大致行的通,不知道会不会有小问题

    3.利用keepAlive和activated搭档即可


    image.png
    image.png

    总算问题解决了!!!周末愉快

    相关文章

      网友评论

          本文标题:vue局部刷新问题,keepAlive&activated使用

          本文链接:https://www.haomeiwen.com/subject/xhkyhctx.html