refactor(ProductList): 使用 `watch` 替代 `onBeforeRouteUpdate` 监听路由变化
为了简化代码逻辑,将 `onBeforeRouteUpdate` 替换为 `watch` 监听路由路径变化。这样可以直接在路径变化时触发数据刷新,减少不必要的回调处理。
This commit is contained in:
parent
746db18c59
commit
91edf31223
|
@ -8,8 +8,10 @@ import VanPopup from "vant/es/popup"
|
|||
import { computed, onBeforeUnmount, onMounted, ref } from "vue"
|
||||
import Cart from "./components/cart.vue"
|
||||
import Detail from "./components/detail.vue"
|
||||
import { onBeforeRouteUpdate } from 'vue-router'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
// 状态管理
|
||||
const productStore = useProductStore()
|
||||
const cartStore = useCartStore()
|
||||
|
@ -115,18 +117,16 @@ onBeforeUnmount(() => {
|
|||
})
|
||||
|
||||
// 结算方法
|
||||
const router = useRouter()
|
||||
|
||||
function handleCheckout() {
|
||||
router.push("/product/checkout")
|
||||
}
|
||||
|
||||
// 路由更新时刷新数据
|
||||
onBeforeRouteUpdate((to, from, next) => {
|
||||
if (to.name == 'ProductList') {
|
||||
watch(() => route.path, (newPath) => {
|
||||
if (newPath === '/') {
|
||||
productStore.getGoods()
|
||||
}
|
||||
next()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Reference in New Issue