refactor(theme-reco): use compositionAPI

Author: reco_luan

packages/@vuepress-reco/core/package.json

@@ -25,6 +25,7 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
+    "@vue/composition-api": "^1.0.0-beta.20",
     "vue": "^2.6.12",
     "vue-property-decorator": "^9.1.2"
   },

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

@@ -36,25 +36,24 @@
 </template>
 
 <script>
+import { defineComponent, computed } from '@vue/composition-api'
 import { RecoIcon } from '@vuepress-reco/core/lib/components'
 import { getOneColor } from '@theme/helpers/other'
 
-export default {
+export default defineComponent({
   components: { RecoIcon },
-  computed: {
-    homeBlogCfg () {
-      return this.$recoLocales.homeBlog
-    },
-    socialLinks () {
-      return this.$themeConfig.blogConfig.socialLinks.map(item => {
-        if (!item.color) {
-          item.color = getOneColor()
-        }
-        return item
-      })
-    }
+  setup (props, ctx) {
+    const { root: _this } = ctx
+
+    const homeBlogCfg = computed(() => _this.$recoLocales.homeBlog)
+    const socialLinks = computed(() => _this.$themeConfig.blogConfig.socialLinks.map(item => {
+      if (!item.color) item.color = getOneColor()
+      return item
+    }))
+
+    return { homeBlogCfg, socialLinks }
   }
-}
+})
 </script>
 
 <style lang="stylus" scoped>

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

@@ -10,27 +10,28 @@
 </template>
 
 <script>
+import { defineComponent, computed } from '@vue/composition-api'
 import { getOneColor } from '@theme/helpers/other'
 
-export default {
+export default defineComponent({
   props: {
     currentTag: {
       type: String,
       default: ''
     }
   },
-  computed: {
-    tags () {
-      return [{ name: this.$recoLocales.tag.all, path: '/tag/' }, ...this.$tags.list]
+  setup (props, ctx) {
+    const { root: _this } = ctx
+    const tags = computed(() => {
+      return [{ name: _this.$recoLocales.tag.all, path: '/tag/' }, ..._this.$tags.list]
+    })
+    const tagClick = tag => {
+      ctx.emit('getCurrentTag', tag)
     }
-  },
-  methods: {
-    tagClick (tag) {
-      this.$emit('getCurrentTag', tag)
-    },
-    getOneColor
+
+    return { tags, tagClick, getOneColor }
   }
-}
+})
 </script>
 
 <style lang="stylus" scoped>

packages/vuepress-theme-reco/enhanceApp.js

@@ -3,13 +3,15 @@ import postMixin from '@theme/mixins/posts'
 import localMixin from '@theme/mixins/locales'
 import { addLinkToHead, addScriptToHead } from '@theme/helpers/utils'
 import { registerCodeThemeCss, interceptRouterError } from '@theme/helpers/other'
+import VueCompositionAPI from '@vue/composition-api'
 
 export default ({
   Vue,
   siteData,
   isServer,
   router
 }) => {
+  Vue.use(VueCompositionAPI)
   Vue.mixin(postMixin)
   Vue.mixin(localMixin)
   if (!isServer) {

packages/vuepress-theme-reco/package.json

@@ -19,6 +19,7 @@
   "author": "reco_luan",
   "main": "index.js",
   "dependencies": {
+    "@vue/composition-api": "^1.0.0-beta.20",
     "@vuepress-reco/core": "^1.5.7",
     "@vuepress-reco/vuepress-plugin-back-to-top": "^1.5.7",
     "@vuepress-reco/vuepress-plugin-comments": "^1.5.7",