Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactoring #1

Merged
merged 3 commits into from Nov 17, 2018
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+231 −163
Diff settings

Always

Just for now

@@ -1,26 +1,3 @@
# vue-app
# Vuex best practice

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```
[Vuex best practice로 가는 여정 포스팅](https://jaeyeophan.github.io/2018/11/17/Vuetorials-7-Vuex-Best-Practice/)
@@ -14,60 +14,92 @@
</template>

<script>
import { mapActions, mapState, mapGetters } from "@/store/modules/todos";
import * as actions from "@/store/modules/todos/types";
import * as getters from "@/store/modules/todos/getters";
import TodoItem from "./TodoItem.vue";
import TodoInput from "./TodoInput.vue";
// import { TO_DONE } from "../store/modules/todos";
import { filterType } from "@/constant";
export default {
name: "todo-list",
components: {
TodoInput,
TodoItem
},
computed: {
currentFilterView() {
return this.$store.state.todos.views.currentFilter;
},
allItems() {
return this.$store.state.todos.items;
},
doneItems() {
return this.$store.getters["todos/doneItems"];
},
activeItems() {
return this.$store.getters["todos/activeItems"];
},
...mapState({
currentFilter: ({ views }) => views.currentFilter,
allItems: ({ items }) => items
}),
...mapGetters({
doneItems: getters.DONE_ITEMS,
activeItems: getters.ACTIVE_ITEMS
}),
// ...mapGetters([...todosMappedGetters]),
// ...mapGetters(["doneItems", "activeItems"]),
// ...mapGetters({
// doneItems: "doneItems",
// activeItems: "activeItems"
// }),
// currentFilter() {
// return this.$store.state.todos.views.currentFilter;
// return this.$store.state["todos/views/currentFilter"]; (x)
// },
// allItems() {
// return this.$store.state.todos.items;
// },
// doneItems() {
// return this.$store.getters["todos/doneItems"];
// // return this.$store.getters.todos.doneItems; (x)
// },
// activeItems() {
// return this.$store.getters["todos/activeItems"];
// },
todos() {
if (this.currentFilterView === "All") {
if (this.currentFilter === filterType.ALL) {
return this.allItems;
}
if (this.currentFilterView === "Done") {
if (this.currentFilter === filterType.DONE) {
return this.doneItems;
// return this[getters.DONE_ITEMS];
}
if (this.currentFilterView === "Active") {
if (this.currentFilter === filterType.ACTIVE) {
return this.activeItems;
// return this[getters.ACTIVE_ITEMS];
}
}
},
methods: {
...mapActions([actions.ADD_ITEM, actions.TO_DONE]),
// ...mapActions({
// addItem: actions.ADD_ITEM,
// toDone: actions.TO_DONE
// }),
toCompleteItem(event, todo) {
this.$store.dispatch("todos/toDone", {
this.toDone({
index: this.todos.indexOf(todo)
});
},
addItem: function(event) {
addItem(event) {
if (event.target.value.trim() === "") {
event.target.value = "";
return;
}
this.$store.dispatch("todos/addItem", {
newItem: {
content: event.target.value,
isDone: false
}
});
const newItem = {
content: event.target.value,
isDone: false
};
this[actions.ADD_ITEM]({ newItem });
// this.addItem({ newItem });
// this.$store.dispatch("todos/addItem", {
// newItem: {
// content: event.target.value,
// isDone: false
// }
// });
event.target.value = "";
}
}
@@ -2,25 +2,27 @@
<div>
<button
class="filter-button"
:class="[currentFilterView === 'All' ? 'active' : '' ]"
:class="[currentFilter === filterType.ALL ? 'active' : '' ]"
@click="onClickFilterButtonAll">
All
{{filterType.ALL}}
</button>
<button
class="filter-button"
:class="[currentFilterView === 'Done' ? 'active' : '' ]"
@click="onClickFilterButtonDone">Done
:class="[currentFilter === filterType.DONE ? 'active' : '' ]"
@click="onClickFilterButtonDone">
{{filterType.DONE}}
</button>
<button
class="filter-button"
:class="[currentFilterView === 'Active' ? 'active' : '' ]"
@click="onClickFilterButtonActive">Active
:class="[currentFilter === filterType.ACTIVE ? 'active' : '' ]"
@click="onClickFilterButtonActive">
{{filterType.ACTIVE}}
</button>

<div>
<span>currentFilter:</span>
<keep-alive>
<component :is="currentFilterView"></component>
<component :is="currentFilter"></component>
</keep-alive>
</div>
</div>
@@ -30,30 +32,47 @@
import All from "./filters/TodoFiltersAll.vue";
import Done from "./filters/TodoFiltersDone.vue";
import Active from "./filters/TodoFiltersActive.vue";
import { mapActions, mapState } from "@/store/modules/todos";
import * as actions from "@/store/modules/todos/types";
import { filterType } from "@/constant";
export default {
data() {
return { filterType };
},
components: {
All,
Done,
Active
},
computed: {
currentFilterView() {
return this.$store.state.todos.views.currentFilter;
}
...mapState({
currentFilter: ({ views }) => views.currentFilter
})
// currentFilter() {
// return this.$store.state.todos.views.currentFilter;
// }
},
methods: {
onClickFilterButtonAll: function() {
this.$store.dispatch("todos/changeCurrentFilterToAll");
// this.currentFilterView = "All";
...mapActions([
actions.CHANGE_CURRENT_FILTER_TO_ALL,
actions.CHANGE_CURRENT_FILTER_TO_DONE,
actions.CHANGE_CURRENT_FILTER_TO_ACTIVE
]),
onClickFilterButtonAll() {
this[actions.CHANGE_CURRENT_FILTER_TO_ALL]();
// this.$store.dispatch("todos/changeCurrentFilterToAll");
// this.currentFilter = "All";
},
onClickFilterButtonDone: function() {
this.$store.dispatch("todos/changeCurrentFilterToDone");
// this.currentFilterView = "Done";
onClickFilterButtonDone() {
this[actions.CHANGE_CURRENT_FILTER_TO_DONE]();
// this.$store.dispatch("todos/changeCurrentFilterToDone");
// this.currentFilter = "Done";
},
onClickFilterButtonActive: function() {
this.$store.dispatch("todos/changeCurrentFilterToActive");
// this.currentFilterView = "Active";
onClickFilterButtonActive() {
this[actions.CHANGE_CURRENT_FILTER_TO_ACTIVE]();
// this.$store.dispatch("todos/changeCurrentFilterToActive");
// this.currentFilter = "Active";
}
}
};
@@ -1,12 +1,3 @@
<template>
<span>ALL({{ this.isRendered }})</span>
<span>ALL</span>
</template>
<script>
export default {
data() {
return {
isRendered: false
};
}
};
</script>
@@ -0,0 +1,5 @@
export const filterType = {
ALL: "All",
DONE: "Done",
ACTIVE: "Active"
};

This file was deleted.

Oops, something went wrong.
@@ -0,0 +1,27 @@
import * as todos from "./types";

// context === {dispatch: ƒ, commit: ƒ, getters: {…}, state: {…}, rootGetters: {…},…}
export default {
[todos.ADD_ITEM]({ commit }, payload) {
commit(todos.ADD_ITEM, payload.newItem);
},
// addItem(context, payload) {
// context.commit("addItem", payload.newItem);
// },

[todos.TO_DONE]({ commit }, payload) {
commit(todos.TO_DONE, payload.index);
},

[todos.CHANGE_CURRENT_FILTER_TO_ALL]({ commit }) {
commit(todos.CHANGE_CURRENT_FILTER_TO_ALL);
},

[todos.CHANGE_CURRENT_FILTER_TO_DONE]({ commit }) {
commit(todos.CHANGE_CURRENT_FILTER_TO_DONE);
},

[todos.CHANGE_CURRENT_FILTER_TO_ACTIVE]({ commit }) {
commit(todos.CHANGE_CURRENT_FILTER_TO_ACTIVE);
}
};
@@ -0,0 +1,7 @@
export const DONE_ITEMS = "DONE_ITEMS";
export const ACTIVE_ITEMS = "ACTIVE_ITEMS";

export default {
[DONE_ITEMS]: state => state.items.filter(todo => todo.isDone),
[ACTIVE_ITEMS]: state => state.items.filter(todo => !todo.isDone)
};
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.