uni-app tabbar页面如果项目代码触发过vuex中的mutation的方法将在使用uni.switchTab跳转到其他页面时自动再次执行离开页面的template中使用到的函数

uni-app tabbar页面如果项目代码触发过vuex中的mutation的方法将在使用uni.switchTab跳转到其他页面时自动再次执行离开页面的template中使用到的函数

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：正式

HBuilderX版本号：3.8.12

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：红米k60

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

// tabbar 页面  
<tempalte>  
    ....  
    <view>{{test()}}</view>  
    <view>{{order()}}</view>  
</tempalte>  
<script>  
export default {  
    // 进入到本页面之后切换到另外一个tabbar页面且使用过store中的方法，会再次打印1和2  
    onLoad(){  
       // ...  
      this.editUser({}) // 对store的操作    
    },  
    methods:{  
        ...mapMutations('editUser')  
        test(){  
            console.log(1)  
        }  
        order(){  
          //  ....  
            console.log(2)    
        }  
    },  

}  
</script>

操作步骤：

如代码所示，

预期结果：

不打印

实际结果：

打印

bug描述：

tabbar页面，如果项目代码触发过vuex中的mutation的方法，将在使用uni.switchTab跳转到其他页面时，会自动再次执行离开页面的template中使用到的函数，如果多次进入不同tabbar页面同样调用过mutation的方法，将会多出来一次上述情况。


更多关于uni-app tabbar页面如果项目代码触发过vuex中的mutation的方法将在使用uni.switchTab跳转到其他页面时自动再次执行离开页面的template中使用到的函数的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app tabbar页面如果项目代码触发过vuex中的mutation的方法将在使用uni.switchTab跳转到其他页面时自动再次执行离开页面的template中使用到的函数的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，如果你在 tabbar 页面中使用了 Vuex 的 mutation 方法，并且在页面离开时（例如通过 uni.switchTab 跳转到其他页面），页面中的某些函数被再次执行，这可能是由于 Vue 的生命周期钩子或 Vuex 的状态管理机制导致的。

可能的原因和解决方案

  1. 生命周期钩子触发：

    • 当你使用 uni.switchTab 跳转到其他页面时，当前页面并不会被销毁，而是会被缓存。当你再次回到该页面时，onShow 生命周期钩子会被触发。
    • 如果你在 onShow 钩子中调用了某些函数，这些函数会在每次页面显示时执行。

    解决方案：

    • 检查你的 onShow 钩子，确保没有不必要的函数调用。
    • 如果你希望在页面首次加载时执行某些逻辑，可以将这些逻辑放在 onLoad 钩子中。
    export default {
  onLoad() {
    // 页面首次加载时执行的逻辑
  },
  onShow() {
    // 页面每次显示时执行的逻辑
  }
}

  2. Vuex 状态变化触发重新渲染：

    • 如果你在 template 中使用了 Vuex 的状态，并且这些状态在页面离开时发生了变化，Vue 会自动重新渲染页面，导致相关函数被再次执行。

    解决方案：

    • 确保在页面离开时不会触发不必要的 Vuex mutation。
    • 如果确实需要在页面离开时更新状态，可以考虑在 onHide 或 onUnload 钩子中进行处理。
    export default {
  onHide() {
    // 页面隐藏时执行的逻辑
  },
  onUnload() {
    // 页面卸载时执行的逻辑
  }
}

  3. 计算属性或侦听器触发：

    • 如果你在页面中使用了 Vue 的计算属性或侦听器，并且这些属性或侦听器依赖于 Vuex 的状态，当状态变化时，这些计算属性或侦听器会被重新计算，可能导致相关函数被再次执行。

    解决方案：

    • 检查你的计算属性和侦听器，确保它们不会在页面离开时被不必要的触发。
    export default {
  computed: {
    someComputedProperty() {
      // 依赖于 Vuex 状态的计算属性
    }
  },
  watch: {
    someVuexState(newVal) {
      // 侦听 Vuex 状态的变化
    }
  }
}
回到顶部