Lessons Learned on Writing Apps with NativeScript VueJS - Example 1

NativeScript-VueJS-example-1.vue

<template>
  <Page @loaded="loaded($event)">
    <ActionBar :title="title" :flat="flat"/>
    <StackLayout>
      <PullToRefresh @refresh="refreshList">
        <ListView id="list" for="(news, index) in newsList" @itemTap="onItemTap" @loadMoreItems="updateList()" :items="newsList">
          <v-template>
            <StackLayout>
              <NewsItem :data="news"/>
              <ActivityIndicator v-if="loading"/>
            </StackLayout>
          </v-template>
        </ListView>
      </PullToRefresh>
    </StackLayout>
  </Page>
</template>

<script>
// import of dependencies
// ...

export default {
  name: 'App',
  components: {
    NewsItem,
    NewsLoading
  },
  data () {
    return {
      actionBarHidden: true,
      flat: true,
      title: 'GitNews'
    }
  },
  methods: {
    ...mapActions({
      retrieve: 'news/retrieve',
      reset: 'news/reset'
    }),
    loaded (event) {
      this.updateList()
    },
    onItemTap (event) {
      this.$navigateTo(Preview)
    },
    updateList() {
      this.checkNetwork()
      this.retrieve()
    },
    refreshList (args) {
      this.checkNetwork()
      this.reset()
      this.retrieve()
    },
    checkNetwork () {
      if(getConnectionType() == connectionType.none) {
        this.$navigateTo(NoNetwork)
      }
    }
  },
  computed: mapGetters({
    loading: 'news/loading',
    error: 'news/error',
    newsList: 'news/list',
    page: 'news/page',
    after: 'news/after'
  })
}
</script>