Skip to content
Permalink
Browse files

Reutilizar funciones compositoras

  • Loading branch information
Juan
Juan committed Feb 1, 2020
1 parent 5e38db5 commit a24611f573910ba414437e0d550e968eff795b40
Showing with 35 additions and 37 deletions.
  1. +3 −37 src/App.vue
  2. +32 −0 src/use/tasksSpace.js
@@ -7,49 +7,15 @@
</template>

<script>
import taskList from "./api/tasks.js";
import useTasksSpace from "./use/tasksSpace.js";
import AppTaskList from "./components/AppTaskList.vue";
import AppTaskSearch from "./components/AppTaskSearch.vue";
import AppTaskAdd from "./components/AppTaskAdd.vue";
import { computed, watch, reactive, toRefs } from "@vue/composition-api";
export default {
name: "app",
setup() {
const tasksData = reactive({
tasks: taskList,
search: "",
filteredTasks: computed(() => {
return tasksData.tasks.filter(task =>
task.title.includes(tasksData.search)
);
})
});
function addTask(task) {
tasksData.tasks.push({
title: task,
completed: false
});
}
const { tasks, search } = toRefs(tasksData);
watch(() => {
console.log(tasks.value.length);
});
watch(search, (newSearch, oldSearch) => {
console.log(`Antes buscabas ${oldSearch} y ahora buscas ${newSearch}`);
});
// const tasks = ref(taskList);
// const search = ref("");
// const filteredTasks = computed(() => {
// return tasks.value.filter(task => task.title.includes(search.value));
// });
return { ...toRefs(tasksData), addTask };
return { ...useTasksSpace() };
},
components: {
AppTaskList,
@@ -0,0 +1,32 @@
import taskList from "@/api/tasks.js";
import { computed, watch, reactive, toRefs } from "@vue/composition-api";
export default function useTasksSpace() {
const tasksData = reactive({
tasks: taskList,
search: "",
filteredTasks: computed(() => {
return tasksData.tasks.filter(task =>
task.title.includes(tasksData.search)
);
})
});

function addTask(task) {
tasksData.tasks.push({
title: task,
completed: false
});
}

const { tasks, search } = toRefs(tasksData);

watch(() => {
console.log(tasks.value.length);
});

watch(search, (newSearch, oldSearch) => {
console.log(`Antes buscabas ${oldSearch} y ahora buscas ${newSearch}`);
});

return { ...toRefs(tasksData), addTask };
}

0 comments on commit a24611f

Please sign in to comment.
You can’t perform that action at this time.