add mutations

@@ -2,10 +2,11 @@
 <div id="app">
 <div id="app">
     <counter></counter>
     <counter></counter>
     <div class="">
     <div class="">
-      {{isLogin}}
+        {{isLogin}}
     </div>
     </div>
     <p>
     <p>
-        <button @click="increment">+</button>
+        <!-- <button @click="increment">+</button> -->
+        <button @click="add">add</button>
         <button @click="decrement">-</button>
         <button @click="decrement">-</button>
         <button @click="login">login</button>
         <button @click="login">login</button>
     </p>
     </p>
@@ -13,6 +14,8 @@
     <child :level="3">Hello world!</child>
     <child :level="3">Hello world!</child>
     <my-paragraph></my-paragraph>
     <my-paragraph></my-paragraph>
     <getters></getters>
     <getters></getters>
+    <span>obj: {{obj}}</span>
+    <button @click="addObj">addObj</button>
 </div>
 </div>
 </template>
 </template>
 
 
@@ -21,6 +24,7 @@ import counter from './components/counter.vue'
 import child from './components/child.vue'
 import child from './components/child.vue'
 import myParagraph from './components/myParagraph.vue'
 import myParagraph from './components/myParagraph.vue'
 import getters from './components/getters.vue'
 import getters from './components/getters.vue'
+import { mapMutations } from 'vuex'
 
 
 export default {
 export default {
     name: 'app',
     name: 'app',
@@ -31,22 +35,47 @@ export default {
     },
     },
     computed: {
     computed: {
         isLogin() {
         isLogin() {
-          return this.$store.state.isLogin
+            return this.$store.state.isLogin
+        },
+        obj () {
+            return this.$store.state.obj
         }
         }
     },
     },
     methods: {
     methods: {
-        increment() {
-            this.$store.commit('increment')
-        },
+        // increment() {
+        //     this.$store.commit('increment', {
+        //         amount: 10
+        //     })
+        //     // this.$store.commit('increment', {
+        //     //     amount: 10
+        //     // },{silent:true})
+        //     // this.$store.commit({
+        //     //     type:'increment',
+        //     //     amount: 10
+        //     // })
+        // },
         decrement() {
         decrement() {
             this.$store.commit('decrement')
             this.$store.commit('decrement')
         },
         },
         login() {
         login() {
             this.$store.commit('login')
             this.$store.commit('login')
-        }
+        },
+        addObj() {
+            this.$store.commit('addObj')
+        },
+        ...mapMutations({
+          add: 'increment' // 映射 this.add() 到 this.$store.commit('increment')
+        })
+        // ...mapMutations([
+        //   'increment' // 映射 this.increment() 到 this.$store.commit('increment')
+        // ]),
+
     },
     },
     components: {
     components: {
-        counter,child,myParagraph,getters
+        counter,
+        child,
+        myParagraph,
+        getters
     }
     }
 }
 }
 </script>
 </script>

@@ -16,7 +16,10 @@ const store = new Vuex.Store({
             id: 2,
             id: 2,
             text: '...',
             text: '...',
             done: false
             done: false
-        }]
+        }],
+        obj: {
+          size: 1
+        }
     },
     },
     getters: {
     getters: {
         doneTodos: state => {
         doneTodos: state => {
@@ -27,9 +30,13 @@ const store = new Vuex.Store({
         }
         }
     },
     },
     mutations: {
     mutations: {
+        // increment (state, payload) {
+        //   state.count += payload.amount
+        // },
         increment: state => state.count++,
         increment: state => state.count++,
         decrement: state => state.count--,
         decrement: state => state.count--,
-        login: state => state.isLogin = true
+        login: state => state.isLogin = true,
+        addObj: state => state.obj = { ...state.obj, newProp: 123 }
     }
     }
 })
 })