Nativescript-vue 监视道具

Question

我的 ns-vue 应用程序在观看时遇到问题。我有基于此抽屉导航模板https://plugins.nativescript.rocks/plugin/@nativescript/template-drawer-navigation-vue 的应用程序。我想为整个应用程序使用地理定位，所以我把这个模块放到 DrawerContent.vue 中。 在这个文件中，我将 props 传递给其他模块：

onNavigationItemTap(component) {
  this.$navigateTo(component, {
    clearHistory: true,
    props:{
      latitude: this.latitude,
      longitude: this.longitude,
    }
   });
   utils.closeDrawer();
}

纬度和经度会定期更新。

在 Home.vue 我有：

props:['latitude','longitude'],
...
....
watch:{
   latitude:()=>{
      console.log('LAT change detected')
      }
}

但这不起作用。我尝试了整个网络的很多选项，例如：

watch: {
   $props: {
      handler() {
        this.parseData();
      },
      deep: true,
      immediate: true,
  }
}

或

watch:{
   '$props':()=>{
      ......
     }
}

但仍然无法正常工作。

请帮忙，谢谢

Answer 1

通过 Nativescript 导航传递的道具可能不是反应式的，无论如何我不会让抽屉组件处理这个功能。

如果您使用的是 Vuex，您可以将这些属性（或整个逻辑）移动到存储中，并通过计算属性将它们获取到您的组件中。如果您的代码可以重复使用，您还可以设置mixin。

Answer 2

vue props 不是响应式的 https://vuejs.org/v2/guide/reactivity.html 但您可以将object 作为包含latitude 和longitude 的属性传递：

data () {
    return {
      location: {
          latitude: ...,
          longitude: ...,
      }
    };
},
...
this.$set(this.location, 'latitude', latitude);
...
onNavigationItemTap(component) {
  this.$navigateTo(component, {
    clearHistory: true,
    props:{
      location: this.location
    }
   });
   utils.closeDrawer();
}

和观察者：

props:['location'],
...
watch:{
   'location.latitude' () {
      console.log('LAT change detected')
      }
}