Is it possible to turn that into <script setup> ? I try many ways but missing something maybe. Need help !

<script>
    import ProductsAPI from '../api/products.api';

    export default {
        name: 'products',

        components: {
            product: 'product',
        },

        data() {
            return {
                products: [],
                error: '',
            };
        },

        async created() {
            this.products = await ProductsAPI.fetchAll();
        },
    };
</script>

CodePudding user response：

It helps to break the problem down into smaller problems that can be tackled individually...

Component registration

Components are automatically registered upon importing their definition in a <script setup>, so registering Product is trivial:

<script setup>
import Product from '@/components/Product.vue' // locally registered
</script>

Data properties

Reactive data properties are declared as ref (or reactive):

<script setup>
import { ref } from 'vue'

const products = ref([])
const error = ref('')

// to change the value of the `ref`, use its `.value` property
error.value = 'My error message'
products.value = [{ name: 'Product A' }, { name: 'Product B' }]
</script>

Alternatively, you can use the new/experimental Reactivity Transform in <script setup>, which globally defines the reactivity APIs, prefixed with $ (e.g., $ref for ref), and avoids having to unwrap refs via .value:

<script setup>
let products = $ref([])
let error = $ref('')

// assign the values directly (no need for .value)
error = 'My error message'
products = [{ name: 'Product A' }, { name: 'Product B' }]
</script>

created lifecycle hook

The <script setup> block occurs in the same timing as the setup hook, which is also the same timing as the created hook, so you could copy your original hook code there. To use await, you could either wrap the call in an async IIFE:

<script setup>
import ProductAPI from '@/api/products.api'
import { ref } from 'vue'

const products = ref([])

;(async () => {
  products.value = await ProductAPI.fetchAll()
})()
</script>

...or create an async function that is called therein:

<script setup>
import ProductAPI from '@/api/products.api'
import { ref } from 'vue'

const products = ref([])

const loadProducts = async () => products.value = await ProductAPI.fetchAll()
loadProducts()
</script>

Component name

There's no equivalent Composition API for the name property, but you can use a <script> block in addition to <script setup> in the same SFC to contain any props that are not supported by the Composition API:

<script setup>
⋮
</script>

<!-- OK to have <script> and <script setup> in same SFC -->
<script>
export default {
  name: 'products',
}
</script>

demo

CodePudding user response：

you should import the component before registering it.

<script>
import ProductsAPI from '../api/products.api';
import ProductComp from './components/Product.vue'

export default {
    name: 'products',

    components: {
        'product': ProductComp
    },

    data() {
        return {
            products: [],
            error: '',
        };
    },

    async created() {
        this.products = await ProductsAPI.fetchAll();
    },
};

Using script setup would look something like this.

 <script setup>
   import ProductsAPI from '../api/products.api';
   import Product from './components/Product.vue'

   let error = '';
   let products = await ProductsAPI.fetchAll();
</script>