refactor(theme): use VCA

Author: reco_luan

packages/vuepress-theme-reco/components/Footer.vue

@@ -30,31 +30,25 @@
 </template>
 
 <script>
+import { defineComponent, computed } from '@vue/composition-api'
 import { RecoIcon } from '@vuepress-reco/core/lib/components'
 import { version } from '../package.json'
-export default {
+export default defineComponent({
   components: { RecoIcon },
-
-  data () {
-    return {
-      version
-    }
-  },
-  computed: {
-    showAccessNumber () {
+  setup (props, ctx) {
+    const showAccessNumber = computed(() => {
       const {
         $themeConfig: { valineConfig },
         $themeLocaleConfig: { valineConfig: valineLocalConfig }
-      } = this
+      } = ctx.root
 
       const vc = valineLocalConfig || valineConfig
-      if (vc && vc.visitor != false) {
-        return true
-      }
-      return false
-    }
+
+      return vc && vc.visitor != false
+    })
+    return { version, showAccessNumber }
   }
-}
+})
 </script>
 
 <style lang="stylus" scoped>

packages/vuepress-theme-reco/components/Sidebar.vue

@@ -8,16 +8,15 @@
 </template>
 
 <script>
+import { defineComponent } from '@vue/composition-api'
 import SidebarLinks from '@theme/components/SidebarLinks'
 import NavLinks from '@theme/components/NavLinks'
 
-export default {
+export default defineComponent({
   name: 'Sidebar',
-
   components: { SidebarLinks, NavLinks },
-
   props: ['items']
-}
+})
 </script>
 
 <style lang="stylus">

packages/vuepress-theme-reco/components/SubSidebar.vue

@@ -1,22 +1,26 @@
 <script>
+import { defineComponent, computed } from '@vue/composition-api'
 import { isActive } from '@theme/helpers/utils'
 
-export default {
-  computed: {
-    headers () {
-      return this.$showSubSideBar ? this.$page.headers : []
-    }
-  },
-  methods: {
-    isLinkActive (header) {
-      const active = isActive(this.$route, this.$page.path + '#' + header.slug)
+export default defineComponent({
+  setup (props, ctx) {
+    const { root } = ctx
+
+    const headers = computed(() => {
+      return root.$showSubSideBar ? root.$page.headers : []
+    })
+
+    const isLinkActive = (header) => {
+      const active = isActive(root.$route, root.$page.path + '#' + header.slug)
       if (active) {
         setTimeout(() => {
           document.querySelector(`.reco-side-${header.slug}`).scrollIntoView()
         }, 300)
       }
       return active
     }
+
+    return { headers, isLinkActive }
   },
   render (h) {
     return h('ul', {
@@ -39,8 +43,7 @@ export default {
       })
     ])
   }
-}
-
+})
 </script>
 
 <style lang="stylus" scoped>