User.js
import {reactive} from "vue";
export default function Users() {
let state = reactive({
users: [{name: 'Shakil', email: 'shak@gmail.com'}]
})
function addUser() {
state.users = [...state.users, {name: 'Ali', email: 'ali@gmail.com'}]
console.log(state);
}
return {
...state,
addUser
}
}
Helloworld.vue
<template>
<div>
<h1>Hello composition API</h1>
<div v-for="(user, index) in state.users" :key="index">
{{user.name}}
</div>
<button @click="addUser">Add</button>
</div>
</template>
<script>
import Users from "../modules/Users";
export default {
setup(){
const {state, addUser} = Users();
console.log('hello world: ', state);
return {
state,
addUser
}
}
};
</script>