修复todos.vue无法使用time travel

Author: zhangzhenfei

README.md

@@ -968,11 +968,14 @@ methods: {
 
 这一节教程中，我们基于`03.vue-todos`将把`vue`的状态管理插件`vuex`整合进来，复制项目`03.vue-todos`改名为`04.vue-vuex-todos`
 
-加入vuex插件库
+加入vuex插件库和vuex-router-sync（把route路由的状态同步到vuex的state中，方便跟踪路由的状态）
 ````
 cnpm i vuex --save
+cnpm i vuex-router-sync --save
 ````
 
+这一节不对vuex的api做深入解析，若遇到不理解的地方还请翻阅[官方文档](https://vuex.vuejs.org/zh-cn/)
+
 为了不影响`lesson03`的`store`实现，我们在`src`中新建了一个`vuex-store`文件夹，作为vuex的store存储库
 `src/vuex-store/index.js`
 ````javascript
@@ -983,6 +986,7 @@ import uuid from 'uuid'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+  strict: process.env.NODE_ENV !== 'production',
   state: {
     todos: [] // 存储所有todos
   },
@@ -1022,6 +1026,9 @@ export default new Vuex.Store({
 })
 ````
 
+`strict: process.env.NODE_ENV !== 'production'`
+在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
+
 > Vuex 通过 store 选项，提供了一种机制将状态从根组件『注入』到每一个子组件中（需调用 Vue.use(Vuex)）
 
 src/main.js

lesson/04.vue-vuex-todos/package.json

@@ -17,7 +17,8 @@
     "uuid": "^3.0.1",
     "vue": "^2.2.2",
     "vue-router": "^2.2.0",
-    "vuex": "^2.2.1"
+    "vuex": "^2.2.1",
+    "vuex-router-sync": "^4.1.2"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

lesson/04.vue-vuex-todos/src/components/Todos/Todos.vue

@@ -1,53 +1,49 @@
 <template>
   <section class="main">
-    <input class="toggle-all" type="checkbox" >
+    <input class="toggle-all" type="checkbox">
     <ul class="todo-list">
-      <li v-for="todo in filteredTodos"
-        class="todo"
-        :key="todo.id"
-        :class="{ completed: todo.completed, editing: todo == editedTodo }">
+      <li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{ completed: todo.completed, editing: todo == editedTodo }">
         <div class="view">
           <input class="toggle" type="checkbox" v-model="todo.completed">
           <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
           <button class="destroy" @click="removeTodo(todo)"></button>
         </div>
-        <input class="edit" type="text"
-          v-model="todo.title"
-          v-todo-focus="todo == editedTodo"
-          @blur="doneEdit(todo)"
-          @keyup.enter="doneEdit(todo)"
+        <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)"
           @keyup.esc="cancelEdit(todo)">
       </li>
     </ul>
   </section>
 </template>
 
 <script>
-  import Store from '@/store/index'
-
+  // import Store from '@/store/index'
+  // visibility filters
+  const filters = {
+    All: todos => todos,
+    Active: todos => (todos.filter(todo => !todo.completed)),
+    Completed: todos => (todos.filter(todo => todo.completed))
+  }
   export default {
     name: 'todos',
     data () {
       return {
-        filteredTodos: [], // 根据filter过滤后的todos
         editedTodo: null // 记录当前编辑的todo
       }
     },
-    created () {
-      this.filterTodos()
-    },
-    watch: {
-       // 如果路由有变化，会再次执行该方法
-      '$route': function (to) {
-        Store.filter.save(to.params.filter)
-        this.filterTodos()
+    computed: {
+      filteredTodos: function () {
+        return this.filterTodos()
       }
     },
     methods: {
       filterTodos () {
-        let filter = this.$route.params.filter
-        if (!filter) return
-        this.filteredTodos = this.$store.getters[filter]
+        let filteredTodos = []
+        let filter = this.$store.state.route.params.filter
+        if (filter && filters[filter]) {
+          let filterFun = filters[filter]
+          filteredTodos = filterFun(this.$store.state.todos)
+        }
+        return filteredTodos
       },
 
       editTodo: function (todo) {
@@ -84,4 +80,5 @@
       }
     }
   }
+
 </script>

lesson/04.vue-vuex-todos/src/main.js

@@ -1,12 +1,15 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import { sync } from 'vuex-router-sync'
 import App from './App'
 import router from './router'
 import store from './vuex-store/index'
 
 Vue.config.productionTip = false
 
+sync(store, router) // done.
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

lesson/04.vue-vuex-todos/src/vuex-store/index.js

@@ -5,6 +5,9 @@ import uuid from 'uuid'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+  // 在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。
+  // 这能保证所有的状态变更都能被调试工具跟踪到。
+  strict: process.env.NODE_ENV !== 'production',
   state: {
     todos: [] // 存储所有todos
   },
@@ -38,9 +41,6 @@ export default new Vuex.Store({
 
   },
   getters: {
-    All: state => state.todos,
-    Active: state => state.todos.filter(todo => !todo.completed),
-    Completed: state => state.todos.filter(todo => todo.completed),
     total: state => state.todos.length,
     remaining: state => state.todos ? state.todos.filter(todo => !todo.completed).length : 0
   }