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

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

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

前提:列表页已经做了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

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