Skip to content

H
hello-vuejs
Commit 7672642f by Nghia Pham
Options

Add demo todo use vuex

parent 779e2c3f
Pipeline #1510 canceled with stages
in 0 seconds
Showing with 461 additions and 0 deletions
3-todo/.gitignore 0 → 100644
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
3-todo/README.md 0 → 100644
# 3-todo
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
3-todo/babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
3-todo/package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
3-todo/package.json 0 → 100644
{
"name": "3-todo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.19.1",
"vue": "^2.6.14",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
3-todo/public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3-todo/src/App.vue 0 → 100644
<template>
<TaskList />
</template>
<script>
import TaskList from '@/components/Task/TaskList.vue';
export default {
name: 'App',
components: {
TaskList
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3-todo/src/components/HelloWorld.vue 0 → 100644
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
3-todo/src/components/Task/TaskItem.vue 0 → 100644
<template>
<p>
{{ item.name }}
<button v-on:click="removeTask(item.id)">Delete</button>
</p>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "TaskItem",
components: {},
props: {
item: {
type: Object,
required: true,
},
},
mounted() {},
methods: {
...mapActions(["removeTask", "updateTask"]),
changeTaskDone(task) {
task.status.done = !task.status.done;
this.updateTask(task);
},
},
};
</script>
<style lang="scss" scoped>
</style>
3-todo/src/components/Task/TaskList.vue 0 → 100644
<template>
<div>
<input v-model="taskNew.name" />
<button v-on:click="createTaskNew()">Add</button>
<li class="item" v-for="item in getTaskList" :key="item.id">
<TaskItem v-bind:item="item" />
</li>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import TaskItem from "@/components/Task/TaskItem.vue";
export default {
name: "TaskList",
components: {
TaskItem,
},
data() {
return {
taskNew: {
name: "",
},
};
},
computed: {
...mapGetters(["getTaskList","getTaskLast"]),
createTaskId() {
if (typeof this.getTaskLast !== "undefined") {
return parseInt(this.getTaskLast?.id) + 1;
}
return 1;
},
createTaskName() {
return this.taskNew.name.trim();
},
},
mounted() {},
methods: {
...mapActions(["addTask"]),
cleanTaskNew() {
this.taskNew.name = "";
},
createTaskNew() {
const taskId = this.createTaskId;
const taskName = this.taskNew.name;
console.log(taskId);
const task = {
id: taskId,
name: taskName,
};
if (taskName != "") {
this.addTask(task);
}
this.cleanTaskNew();
},
},
};
</script>
<style >
.item {
list-style-type: none;
}
</style>
3-todo/src/main.js 0 → 100644
import Vue from 'vue';
import App from './App.vue';
import store from '@/store';
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount('#app');
3-todo/src/store/index.js 0 → 100644
import Vue from 'vue';
import Vuex from 'vuex';
import tasks from './modules/tasks';
// LOAD VUEX
Vue.use(Vuex);
// STATE
const state = {
pageTitle: 'Vue ToDo List'
};
// GETTERS
const getters = {
getPageTitle(state) {
return state.pageTitle;
}
};
// MUTACTIONS
const mutations = {};
// ACTIONS
const actions = {};
// MODULES
const modules = {
tasks
};
// CREATE STORE
const store = new Vuex.Store({
state,
getters,
mutations,
actions,
modules
});
export default store;
3-todo/src/store/modules/tasks.js 0 → 100644
/*
* MODULE VUEX
* TASKS
* =================================================
*/
const state = {
task: {
list: [
{
id: 1,
name: 'Do something awesome!',
},
{
id: 2,
name: 'Buy toilet paper',
},
{
id: 3,
name: 'Learn Vue',
}
]
}
};
const getters = {
getTaskList(state) {
return state.task.list;
},
getTotalTaskList(state) {
return state.task.list.length;
},
getTaskLast(state) {
return state.task.list[state.task.list.length - 1];
}
};
const actions = {
addTask({commit}, task) {
const taskNew = {
id: task.id,
name: task.name,
status: {
done: false
}
};
commit('addTask', taskNew);
},
updateTask({commit}, task) {
commit('updateTask', task);
},
removeTask({commit}, taskId) {
commit('removeTask', taskId);
},
removeTaskList({commit}) {
commit('removeTaskList');
},
removeTaskListDone({commit}) {
commit('removeTaskListDone');
},
checkTaskListLocalStorage({commit}) {
if (localStorage.getItem('tasks')) {
try {
commit('updateTaskListLocalStorage');
} catch (e) {
commit('removeTaskListLocalStorage');
}
} else {
commit('createTaskListLocalStorage');
}
},
createTaskListLocalStorage({commit}) {
commit('createTaskListLocalStorage');
}
};
const mutations = {
addTask(state, task) {
state.task.list.push(task);
},
updateTask(state, task) {
const taskIndex = state.task.list.findIndex(item => item.id === task.id);
if (taskIndex !== -1) {
state.task.list.splice(taskIndex, 1, task);
}
},
removeTask(state, taskId) {
state.task.list = state.task.list.filter(item => item.id !== taskId);
},
removeTaskList(state) {
state.task.list = [];
},
createTaskListLocalStorage(state) {
localStorage.setItem('tasks', JSON.stringify(state.task.list));
},
updateTaskListLocalStorage(state) {
state.task.list = JSON.parse(localStorage.getItem('tasks'));
},
removeTaskListLocalStorage() {
localStorage.removeItem('tasks');
}
};
export default {
state,
getters,
actions,
mutations
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment