初步vuex重构

src/App.vue

@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import { mapState, mapMutations } from 'vuex';
 import CommonForm from './components/CommonForm.vue';
 import TodoListItem from './components/TodoListItem.vue';
 
@@ -54,85 +55,35 @@ export default {
         CommonForm,
         TodoListItem,
     },
-    data() {
-        return {
-            todos: [],
-            toggleCheckAllState: false,
-        };
-    },
-    watch: {
-        todos() {
-            let checkAllState = true;
-            if (this.todos.length === 0) {
-                checkAllState = false;
-            } else {
-                this.todos.forEach((item) => {
+    computed: {
+        ...mapState([
+            'todos',
+        ]),
+        ...mapState({
+            toggleCheckAllState: (state) => {
+                if (state.todos.length === 0) {
+                    return false;
+                }
+
+                for (let i = 0, len = state.todos.length; i < len; i += 1) {
+                    const item = state.todos[i];
                     if (!item.checked) {
-                        checkAllState = false;
+                        return false;
                     }
-                });
-            }
-            this.toggleCheckAllState = checkAllState;
-        },
-
-        /*
-        存在循环watch，如何解决呢？问强哥
-        toggleCheckAllState: function (checked) {
-            console.log(arguments);
-            this.todos = this.todos.map((item) => {
-                return Object.assign({}, item, {checked: checked});
-            });
-        },
-        */
-    },
-    methods: {
-        /*
-         * 利用random随机数生成伪GUID
-         * https://zh.wikipedia.org/wiki/全局唯一标识符
-         * https://baike.baidu.com/view/185358.htm
-         */
-        guid() {
-            const raw = [
-                Math.random().toString(31).substr(2),
-                Math.random().toString(31).substr(2),
-                Math.random().toString(31).substr(2),
-            ].join('').substr(0, 32);
-            return raw.replace(/(\S{8})(\S{4})(\S{4})(\S{4})(\S{12})/, '$1-$2-$3-$4-$5');
-        },
-
-        create(modal) {
-            console.log(modal);
-            const newModal = Object.assign(modal, { id: this.guid() });
-            this.todos.push(newModal);
-        },
-
-        update(modal) {
-            const index = this.todos.findIndex(item => item.id === modal.id);
-            this.todos.splice(index, 1, modal);
-        },
-
-        remove(id) {
-            const index = this.todos.findIndex(item => item.id === id);
-            this.todos.splice(index, 1);
-        },
-
-        toggleCheckAll(checked) {
-            this.todos = this.todos.map(item => Object.assign({}, item, { checked }));
-        },
-
-        checkAll() {
-            this.todos = this.todos.map(item => Object.assign({}, item, { checked: true }));
-        },
-
-        toggle() {
-            this.todos = this.todos.map(item => Object.assign({}, item, { checked: !item.checked }));
-        },
-
-        clean() {
-            this.todos = this.todos.filter(item => !item.checked);
-        },
-
+                }
+                return true;
+            },
+        }),
     },
+    methods: mapMutations([
+        'create',
+        'update',
+        'remove',
+        'toggleCheckAll',
+        'checkAll',
+        'toggle',
+        'clean',
+    ]),
 };
 </script>
 

src/store.js

@@ -1,15 +1,51 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import { guid } from './util';
+
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-    state: {
+    strict: process.env.NODE_ENV !== 'production',
 
+    state: {
+        todos: [],
     },
+
     mutations: {
+        create(state, payload) {
+            const model = Object.assign({}, payload, { id: guid() });
+            state.todos.push(model);
+        },
+
+        update(state, payload) {
+            const index = state.todos.findIndex(item => item.id === payload.id);
+            const model = Object.assign({}, state.todos[index], payload);
+            state.todos.splice(index, 1, model);
+        },
 
+        remove(state, id) {
+            const index = state.todos.findIndex(item => item.id === id);
+            state.todos.splice(index, 1);
+        },
+
+        toggleCheckAll(state, checked) {
+            state.todos = state.todos.map(item => Object.assign({}, item, { checked }));
+        },
+
+        checkAll(state) {
+            state.todos = state.todos.map(item => Object.assign({}, item, { checked: true }));
+        },
+
+        toggle(state) {
+            state.todos = state.todos.map(item => Object.assign({}, item, { checked: !item.checked }));
+        },
+
+        clean(state) {
+            state.todos = state.todos.filter(item => !item.checked);
+        },
     },
+
     actions: {
 
     },

src/util.js

@@ -0,0 +1,17 @@
+/*
+ * 利用random随机数生成伪GUID
+ * https://zh.wikipedia.org/wiki/全局唯一标识符
+ * https://baike.baidu.com/view/185358.htm
+ */
+export function guid() {
+    const raw = [
+        Math.random().toString(31).substr(2),
+        Math.random().toString(31).substr(2),
+        Math.random().toString(31).substr(2),
+    ].join('').substr(0, 32);
+    return raw.replace(/(\S{8})(\S{4})(\S{4})(\S{4})(\S{12})/, '$1-$2-$3-$4-$5');
+}
+
+export default {
+    guid,
+};