Vue JS coding styles

John Doe ·

402 Views

1. setup - data

<template>
...
</template>

<script lang="ts">
export default defineComponent({
  components: {
  },
  props: {
    testId: {
      type: String,
      required: false,
    },
  },
  setup() {
    return {};
  },
  data() {
    return {
      itemList: [] as Array<Item>,
      itemId: 0,
      isAction: false,
    };
  },
  computed: {
    test() {
      return 0;
    },
  },
  watch: {
  },
  async mounted() {
  },
  methods: {
    test() {
    },
  }
})
</script>
<style scroped>
</style>

 

2. setup

<template>
...
</template>

<script lang="ts">
import { computed, defineComponent , reactive, onMounted, ref } from "vue"
import { useStore } from 'vuex';

export default defineComponent({
  components: {
    test,
  },
  setup() {
    const store = useStore();
    const state = reactive({
      test: '' as string,
    })
    const methods = initialMethods(state, store, ref)
    onMounted(() => {
      methods.testData()
    })
    
    return {
      state,
      ...methods,
    }
  },
})
const initialMethods = (state: any, store: any, ref:any) => {
  const testData = () => {
  }
  return {
    testData,
  }
}
</script>
<style scroped>
</style>

 

Vue.js