close Vuex store for modifications from outside

Author: havvg

src/App.vue

@@ -25,11 +25,11 @@
  </div>
 
  <input class="edit" type="text"
- v-model="todo.title"
+ v-model="editedTitle"
  v-todo-focus="todo == editedTodo"
  @blur="doneEdit(todo)"
  @keyup.enter="doneEdit(todo)"
- @keyup.esc="cancelEdit(todo)">
+ @keyup.esc="resetEditor()">
  </li>
  </ul>
  </section>
@@ -97,7 +97,9 @@ export default class App extends Vue {
  private visibility: string = 'all'
 
  private newTodo: string = ''
+
  private editedTodo: Todo|null = null
+ private editedTitle: string|null = null
  private beforeEditCache: string|null = null
 
  get filteredTodos(): Todo[] {
@@ -113,7 +115,7 @@ export default class App extends Vue {
  }
 
  addTodo() {
- const title = this.newTodo && this.newTodo.trim()
+ const title = this.newTodo.trim()
  if (!title) {
  return
  }
@@ -126,26 +128,29 @@ export default class App extends Vue {
  editTodo(todo: Todo) {
  this.beforeEditCache = todo.title
  this.editedTodo = todo
+ this.editedTitle = todo.title
  }
 
  doneEdit(todo: Todo) {
  if (!this.editedTodo) {
  return
  }
 
- this.editedTodo = null
+ const title = this.editedTitle.trim()
 
- todo.title = todo.title.trim()
- if (todo.title) {
- this.$store.commit('update', todo)
+ if (title) {
+ this.$store.commit('update', { todo, title })
  } else {
  this.removeTodo(todo)
  }
+
+ this.resetEditor()
  }
 
- cancelEdit(todo: Todo) {
+ resetEditor() {
+ this.beforeEditCache = null
  this.editedTodo = null
- todo.title = this.beforeEditCache
+ this.editedTitle = null
  }
 
  created() {

src/TodoStore.ts

@@ -4,64 +4,83 @@ import StoragePlugin from './StoragePlugin'
 import Todo from './Todo'
 import TodoStorage from './TodoStorage'
 
+const createQuery = (todos: Todo[]) => todos.map(todo => Object.freeze(Object.assign({}, todo)))
+const findById = (todos: Todo[], id: number) => todos.find(todo => todo.id === id)
+
 export default function TodoStore() {
  return new Vuex.Store({
  plugins: [StoragePlugin()],
 
  state: {
  uid: 1,
- todos: []
+ todos: <Todo[]>[],
+ query: <Todo[]>[],
  },
 
  mutations: {
  add(state, title: string) {
  state.todos.push({
  id: state.uid++,
  title: title,
- completed: false
+ completed: false,
  })
+
+ state.query = createQuery(state.todos)
  },
 
  remove(state, todo: Todo) {
  state.todos.splice(state.todos.indexOf(todo), 1)
+
+ state.query = createQuery(state.todos)
  },
 
  replace(state, todos: Todo[]) {
- state.todos = todos;
+ state.todos = todos
  state.uid = state.todos.length
+
+ state.query = createQuery(state.todos)
  },
 
- update(state, todo: Todo) {
- // Objects are references, so this is noop.
- // However it will trigger any plugin attached.
+ update(state, payload: { todo: Todo, title: string }) {
+ const entry = findById(state.todos, payload.todo.id)
+
+ entry.title = payload.title
+
+ state.query = createQuery(state.todos)
  },
 
  toggle(state, todo: Todo) {
- todo.completed = !todo.completed
+ const entry = findById(state.todos, todo.id)
+
+ entry.completed = !todo.completed
+
+ state.query = createQuery(state.todos)
  },
 
  toggleAll(state, value: boolean) {
- state.todos.forEach((todo: Todo) => {
- todo.completed = value
- })
+ state.todos.forEach(todo => todo.completed = value)
+
+ state.query = createQuery(state.todos)
  },
 
  removeCompleted(state) {
- state.todos = this.getters.active
+ state.todos = state.todos.filter(todo => !todo.completed)
+
+ state.query = createQuery(state.todos)
  }
  },
 
  getters: {
  all(state): Todo[] {
- return state.todos;
+ return state.query
  },
 
- active(state): Todo[] {
- return state.todos.filter(todo => !todo.completed)
+ active(state, getters): Todo[] {
+ return getters.all.filter(todo => !todo.completed)
  },
 
- completed(state): Todo[] {
- return state.todos.filter(todo => todo.completed)
+ completed(state, getters): Todo[] {
+ return getters.all.filter(todo => todo.completed)
  },
 
  remaining(state, getters): number {