Merge pull request #52 from xianshenglu:feat_vue3

chore(vue@3): migrate vue2 script to vue3 script setup

Author: xianshenglu

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}

demo/vue@3/jsconfig.json

@@ -17,49 +17,29 @@
   />
 </template>
 
-<script>
-import { defineComponent } from 'vue';
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useStore } from 'vuex'
 
 import AppHeader from '@/components/AppHeader'
-import AppNav from './components/AppNav'
 import AppLoading from './components/AppLoading'
 import PlayerMed from './views/player/PlayerMed'
-import { mapState, mapMutations } from 'vuex'
 
-export default defineComponent({
-  name: 'App',
+const audioEl = ref(null)
+const store = useStore()
 
-  components: {
-    AppLoading,
-    AppHeader,
-    AppNav,
-    PlayerMed
-  },
+const isPlayerMedShow = computed(() => store.state.player.isPlayerMedShow)
+const isPlayerMedSmall = computed(() => store.state.player.isPlayerMedSmall)
+const song = computed(() => store.state.player.song)
+const vh = computed(() => store.state.device.vh)
 
-  mounted() {
-    document.documentElement.style.setProperty('--vh', this.vh / 100 + 'px')
-    this.findAudioEl(this.$refs.audioEl)
-  },
+const findAudioEl = (el) => store.commit('player/findAudioEl', el)
+const togglePlay = (status) => store.commit('player/togglePlay', status)
 
-  computed: {
-    ...mapState('player', {
-      isPlayerMedShow: 'isPlayerMedShow',
-      isPlayerMedSmall: 'isPlayerMedSmall',
-      music: 'music',
-      song: 'song'
-    }),
-    ...mapState('device', {
-      vh: 'vh'
-    })
-  },
-
-  methods: {
-    ...mapMutations('player', {
-      findAudioEl: 'findAudioEl',
-      togglePlay: 'togglePlay'
-    })
-  },
-});
+onMounted(() => {
+  document.documentElement.style.setProperty('--vh', vh.value / 100 + 'px')
+  findAudioEl(audioEl.value)
+})
 </script>
 
 <style lang="less" scoped>

demo/vue@3/src/App.vue

@@ -20,36 +20,23 @@
   </header>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-import { mapState, mapMutations } from 'vuex'
+<script setup>
 import bus from '@/eventBus'
-export default defineComponent({
-  name: 'AppHeader',
+import { computed } from 'vue';
+import { useStore } from 'vuex';
 
-  data() {
-    return {
-      bus: bus
-    }
-  },
+const store = useStore();
+const logo__text = computed(() => store.state.images.logo__text);
+const curPlayerId = computed(() => store.state.player.curPlayerId);
 
-  computed: {
-    ...mapState('images', ['logo__text']),
-    ...mapState('player', ['curPlayerId'])
-  },
+function goBack() {
+  if (curPlayerId.value === 1) {
+    store.commit('player/togglePlayers', 1);
+    return;
+  }
+  history.go(-1);
+}
 
-  methods: {
-    ...mapMutations('player', ['togglePlayers']),
-    goBack() {
-      if (this.curPlayerId === 1) {
-        this.togglePlayers(1)
-        return
-      }
-      history.go(-1)
-    }
-  },
-});
 </script>
 
 <style lang="less" scoped>

demo/vue@3/src/components/AppHeader.vue

@@ -6,20 +6,18 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
 
-import { mapState } from 'vuex'
-export default defineComponent({
-  name: 'AppLoading',
+const store = useStore();
 
-  computed: {
-    ...mapState('loading', ['isShow', 'sizeClassName']),
-    className() {
-      let className = this.isShow ? 'loading' : 'loading loading--fade_out'
-      return className + ' ' + this.sizeClassName
-    }
-  },
+const isShow = computed(() => store.state.loading.isShow);
+const sizeClassName = computed(() => store.state.loading.sizeClassName);
+
+const className = computed(() => {
+  let name = isShow.value ? 'loading' : 'loading loading--fade_out';
+  return name + ' ' + sizeClassName.value;
 });
 </script>
 

demo/vue@3/src/components/AppLoading.vue

@@ -14,30 +14,24 @@
   </ul>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
+<script setup>
+import { useStore } from 'vuex';
 
-export default defineComponent({
-  name: 'AppMusicList',
+const props = defineProps({
+  musicList: {
+    type: Array,
+    default: () => []
+  }
+});
 
-  props: {
-    musicList: {
-      type: Array,
-      default() {
-        return []
-      }
-    }
-  },
+const store = useStore();
 
-  methods: {
-    wantPlay(music) {
-      this.$store.commit('player/wantPlay', {
-        music,
-        musicList: this.$props.musicList
-      })
-    }
-  },
-});
+const wantPlay = (music) => {
+  store.commit('player/wantPlay', {
+    music,
+    musicList: props.musicList
+  });
+};
 </script>
 
 <style lang="less" scoped>

demo/vue@3/src/components/AppMusicList.vue

@@ -13,44 +13,37 @@
   </section>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
 
-export default defineComponent({
-  name: 'AppNav',
+const route = useRoute();
 
-  data() {
-    return {
-      navs: [
-        {
-          text: '新歌',
-          name: 'new',
-          path: '/'
-        },
-        {
-          text: '排行',
-          name: 'rank',
-          path: '/rank/list'
-        },
-        {
-          text: '歌单',
-          name: 'song',
-          path: '/song/list'
-        },
-        {
-          text: '歌手',
-          name: 'singer',
-          path: '/singer/category'
-        }
-      ]
-    }
+const navs = ref([
+  {
+    text: '新歌',
+    name: 'new',
+    path: '/'
   },
-
-  computed: {
-    activeIndex() {
-      return this.navs.findIndex(nav => nav.path === this.$route.path)
-    }
+  {
+    text: '排行',
+    name: 'rank',
+    path: '/rank/list'
+  },
+  {
+    text: '歌单',
+    name: 'song',
+    path: '/song/list'
   },
+  {
+    text: '歌手',
+    name: 'singer',
+    path: '/singer/category'
+  }
+]);
+
+const activeIndex = computed(() => {
+  return navs.value.findIndex(nav => nav.path === route.path);
 });
 </script>
 

demo/vue@3/src/components/AppNav.vue

@@ -5,19 +5,8 @@
   </main>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
+<script setup>
 import AppNav from '@/components/AppNav'
-export default defineComponent({
-  name: 'Main',
-
-  components: {
-    AppNav
-  },
-
-  methods: {},
-});
 </script>
 
 <style lang="less" scoped>

demo/vue@3/src/components/Main.vue

@@ -16,29 +16,17 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'PubModuleDes',
-
-  props: {
-    description: {
-      type: String,
-      default() {
-        return ''
-      }
-    }
-  },
-
-  data() {
-    return {
-      showMore: false
-    }
-  },
-
-  methods: {},
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  description: {
+    type: String,
+    default: ''
+  }
 });
+
+const showMore = ref(false);
 </script>
 
 <style scoped lang="less">

demo/vue@3/src/components/PubModuleDes.vue

@@ -8,20 +8,12 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'PubModuleHead',
-
-  props: {
-    moduleHeadInfo: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
+<script setup>
+const props = defineProps({
+  moduleHeadInfo: {
+    type: Object,
+    default: () => ({})
+  }
 });
 </script>