learn vuex

vuex_demo1/src/components/add.vue

@@ -0,0 +1,32 @@
+<template>
+<div>
+    <h3>当前最新的count值为：{{$store.state.count}}</h3>
+    <button @click="addcount">+1</button>
+    <button @click="btnhandle">+1 Async</button>
+    <button @click="btnhandle1">+5 Async</button>
+    <h3>{{$store.getters.showNum}}</h3>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            
+        }
+    },
+    methods: {
+        addcount(){
+            this.$store.commit('add')
+        },
+        //异步让count自增1
+        btnhandle(){
+            //dispatch函数专门用来触发action
+            this.$store.dispatch('addAsync')
+        },
+        btnhandle1(){
+            this.$store.dispatch('addNAsync',5)
+        }
+    }
+}
+</script>

vuex_demo1/src/components/sub.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <h3>当前最新的count值为：{{count}}</h3>
+        <button @click="subN(2)">-2</button>
+        <button @click="xc(10)">*10</button>
+        <button @click="subNAsync(10)">-10 Async</button>
+        <h3>{{showNum1}}</h3>
+    </div>
+</template>
+
+<script>
+import { mapState,mapMutations,mapActions,mapGetters } from "vuex";
+export default {
+    data(){
+        return{ }
+    },
+    methods:{
+        ...mapMutations(['subN','xc']),
+        ...mapActions(['subNAsync']),
+    },
+    computed:{
+        ...mapState(['count']),
+        ...mapGetters(['showNum','showNum1'])
+    }
+}
+</script>