anatolykopyl/vue-todo-list
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vue-todo-list.git synced 2026-03-26 04:45:17 +00:00
Code Issues Projects Releases Wiki Activity

Added Vuex

Browse Source
This commit is contained in:
Anatoly Kopyl
2019-05-29 01:49:49 +03:00
parent 1b625609bd
commit 6b98bc880f
20 changed files with 176 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/css/app.979a911f.css vendored Normal file
View File

@@ -0,0 +1 @@
@import url(https://fonts.googleapis.com/css?family=Oswald&display=swap);.todo-item[data-v-fa526f3c]{margin:auto;text-align:left;width:400px;cursor:pointer;font-weight:Regular}.is-complete[data-v-fa526f3c]{text-decoration:line-through}.delete[data-v-fa526f3c]{float:right;border:none;background-color:transparent;cursor:pointer}.todos[data-v-7f14599a]{width:400px;margin:auto}.addTodo[data-v-2a0e5e01]{width:400px;height:30px;margin:auto;text-align:left}.txtField[data-v-2a0e5e01]{width:300px;float:left;border-width:0;border-bottom-width:1px}.btn[data-v-2a0e5e01],.txtField[data-v-2a0e5e01]{font-family:Oswald,sans-serif;height:30px;font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box}.btn[data-v-2a0e5e01]{float:right;border:0;width:90px;background:#000;color:#fff}#app{font-family:Oswald,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;margin-top:50px}

BIN
dist/favicon.ico vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

1
dist/index.html vendored Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/memo.png><title>Список Дел</title><link href=/css/app.979a911f.css rel=preload as=style><link href=/js/app.170f7cb7.js rel=preload as=script><link href=/js/chunk-vendors.c1c9c82d.js rel=preload as=script><link href=/css/app.979a911f.css rel=stylesheet></head><body><noscript><strong>We're sorry but ToDo List doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.c1c9c82d.js></script><script src=/js/app.170f7cb7.js></script></body></html>

2
dist/js/app.170f7cb7.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.170f7cb7.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

27
dist/js/chunk-vendors.c1c9c82d.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/chunk-vendors.c1c9c82d.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
dist/memo.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

22
package-lock.json generated
View File

@@ -1945,6 +1945,15 @@
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
"dev": true "dev": true
}, },
"axios": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
"integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
"requires": {
"follow-redirects": "^1.3.0",
"is-buffer": "^1.1.5"
}
},
"babel-code-frame": { "babel-code-frame": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -4902,7 +4911,6 @@
"version": "1.7.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
"integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==", "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
"dev": true,
"requires": { "requires": {
"debug": "^3.2.6" "debug": "^3.2.6"
}, },
@@ -4911,7 +4919,6 @@
"version": "3.2.6", "version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": { "requires": {
"ms": "^2.1.1" "ms": "^2.1.1"
} }
@@ -6298,8 +6305,7 @@
"is-buffer": { "is-buffer": {
"version": "1.1.6", "version": "1.1.6",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
"dev": true
}, },
"is-callable": { "is-callable": {
"version": "1.1.4", "version": "1.1.4",
@@ -7215,8 +7221,7 @@
"ms": { "ms": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
"dev": true
}, },
"multicast-dns": { "multicast-dns": {
"version": "6.2.3", "version": "6.2.3",
@@ -10830,6 +10835,11 @@
"sortablejs": "^1.9.0" "sortablejs": "^1.9.0"
} }
}, },
"vuex": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
"integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
},
"watchpack": { "watchpack": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

4
package.json
View File

@@ -8,12 +8,14 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^0.18.0",
"core-js": "^2.6.5", "core-js": "^2.6.5",
"emoji-mart-vue": "^2.6.6", "emoji-mart-vue": "^2.6.6",
"uuid": "^3.3.2", "uuid": "^3.3.2",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-emoji-picker": "^1.0.1", "vue-emoji-picker": "^1.0.1",
"vuedraggable": "^2.21.0" "vuedraggable": "^2.21.0",
"vuex": "^3.1.1"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0", "@vue/cli-plugin-babel": "^3.8.0",

4
public/index.html
View File

@@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>memo.png">
<title>ToDo List</title> <title>Список Дел</title>
</head> </head>
<body> <body>
<noscript> <noscript>

BIN
public/memo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

35
src/App.vue
View File

@@ -1,14 +1,12 @@
<template> <template>
<div id="app"> <div id="app">
<Header /> <Header />
<AddTodo v-on:add-todo="addTodo"/> <AddTodo />
<Todos v-bind:todos="todos" v-on:del-todo="deleteTodo" /> <Todos />
</div> </div>
</template> </template>
<script> <script>
import uuid from 'uuid'
import Header from "./components/layout/Header"; import Header from "./components/layout/Header";
import Todos from "./components/Todos"; import Todos from "./components/Todos";
import AddTodo from "./components/AddTodo"; import AddTodo from "./components/AddTodo";
@@ -20,34 +18,6 @@ export default {
Todos, Todos,
AddTodo AddTodo
}, },
data() {
return {
todos: [
{
id: uuid.v4(),
name: "Что-то, что я собираюсь сделать",
completed: false
},
{
id: uuid.v4(),
name: "Что-то, что я уже сделал",
completed: true
}
]
}
},
methods: {
deleteTodo(id) {
this.todos = this.todos.filter(todo => todo.id !== id);
},
addTodo(n) {
(n !== '' & n !== ' ') && this.todos.push({
id: uuid.v4(),
name: n,
completed: false
})
}
}
} }
</script> </script>
@@ -58,7 +28,6 @@ export default {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: ;
margin-top: 50px; margin-top: 50px;
} }
</style> </style>

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

19
src/components/AddTodo.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<form autocomplete="off" @submit.prevent="$emit('add-todo', inputName); inputName = '';" class="addTodo"> <form autocomplete="off" @submit.prevent="addTodo(inputName); inputName = '';" class="addTodo">
<input type="text" v-model="inputName" name="title" placeholder="Название дела..." class="txtField"> <input type="text" v-model="inputName" name="title" placeholder="Название дела..." class="txtField">
<input type="submit" value="Добавить" class="btn"> <input type="submit" value="Добавить" class="btn">
</form> </form>
@@ -8,14 +8,19 @@
</template> </template>
<script> <script>
export default { import { mapActions } from "vuex";
name: "AddTodo",
data() { export default {
return { name: "AddTodo",
inputName: '' data() {
} return {
inputName: ''
} }
},
methods: {
...mapActions(["addTodo"])
} }
}
</script> </script>
<style scoped> <style scoped>

43
src/components/TodoItem.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="todo-item" v-bind:class='{"is-complete":todo.completed}' v-on:click="markComplete"> <div class="todo-item" v-bind:class='{"is-complete":todo.completed}' v-on:click="$emit('toggle-complete', todo.id)">
<p> <p>
{{todo.name}} {{todo.name}}
<button @click="$emit('del-todo', todo.id)" class="delete">&#10060;</button> <button @click="$emit('del-todo', todo.id)" class="delete">&#10060;</button>
@@ -8,34 +8,31 @@
</template> </template>
<script> <script>
import { mapActions } from "vuex";
export default { export default {
name: "TodoItem", name: "TodoItem",
props: ["todo"], props: ["todo"]
methods: {
markComplete() {
this.todo.completed = !this.todo.completed
}
}
} }
</script> </script>
<style scoped> <style scoped>
.todo-item { .todo-item {
margin: auto; margin: auto;
text-align: left; text-align: left;
width: 400px; width: 400px;
cursor: pointer; cursor: pointer;
font-weight: Regular; font-weight: Regular;
} }
.is-complete { .is-complete {
text-decoration: line-through; text-decoration: line-through;
} }
.delete { .delete {
float: right; float: right;
border: none; border: none;
background-color: Transparent; background-color: Transparent;
cursor: pointer; cursor: pointer;
} }
</style> </style>

24
src/components/Todos.vue
View File

@@ -1,14 +1,16 @@
<template> <template>
<draggable v-model="todos" @start="drag=true" @end="drag=false"> <draggable class="todos" @start="drag=true" @end="drag=false">
<div v-bind:key="todo.id" v-for="todo in todos"> <div v-bind:key="todo.id" v-for="todo in allTodos">
<TodoItem v-bind:todo="todo" v-on:del-todo="$emit('del-todo', todo.id)" /> <TodoItem v-bind:todo="todo" v-on:del-todo="delTodo(todo.id)" v-on:toggle-complete="toggleComplete(todo.id)" />
</div> </div>
</draggable> </draggable>
</template> </template>
<script> <script>
import draggable from 'vuedraggable' import draggable from 'vuedraggable';
import TodoItem from "./TodoItem.vue"; import TodoItem from "./TodoItem.vue";
import { mapGetters } from "vuex";
import { mapActions } from "vuex";
export default { export default {
name: "Todos", name: "Todos",
@@ -16,16 +18,16 @@ export default {
draggable, draggable,
TodoItem TodoItem
}, },
props: ["todos"],
methods: { methods: {
moveItem(from, to) { ...mapActions(["delTodo", "toggleComplete"]),
this.todos.splice(to, 0, this.todos[from]); },
this.todos[from] = null; computed: mapGetters(["allTodos"])
}
}
} }
</script> </script>
<style scoped> <style scoped>
.todos {
width: 400px;
margin: auto;
}
</style> </style>

8
src/main.js
View File

@@ -1,8 +1,10 @@
import Vue from 'vue' import Vue from 'vue';
import App from './App.vue' import App from './App.vue';
import store from './store';
Vue.config.productionTip = false Vue.config.productionTip = false;
new Vue({ new Vue({
store,
render: h => h(App), render: h => h(App),
}).$mount('#app') }).$mount('#app')

11
src/store/index.js Normal file
View File

@@ -0,0 +1,11 @@
import Vue from "vue";
import Vuex from "vuex";
import todos from "./modules/todos";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
todos
}
});

59
src/store/modules/todos.js Normal file
View File

@@ -0,0 +1,59 @@
import uuid from 'uuid'
const state = {
todos: [
{
id: uuid.v4(),
name: "Что-то, что я собираюсь сделать",
completed: false
},
{
id: uuid.v4(),
name: "Что-то, что я уже сделал",
completed: true
}
]
};
const getters = {
allTodos: (state) => state.todos
};
const actions = {
async toggleComplete({commit}, id) {
commit('toggleComplete', id)
},
async addTodo({commit}, name) {
commit('addTodo', name)
},
async delTodo({commit}, id) {
commit('delTodo', id)
}
};
const mutations = {
toggleComplete(state, id) {
state.todos.forEach(element => {
if (element.id == id) {
element.completed = !element.completed
}
});
},
addTodo(state, n) {
state.todos.unshift({
id: uuid.v4(),
name: n,
completed: false
});
},
delTodo(state, id) {
state.todos = state.todos.filter(todo => todo.id !== id);
}
};
export default {
state,
getters,
actions,
mutations
};