learn vuex

vuex_demo1/src/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <my-add></my-add>
+    <p>-----------------------------------------</p>
+    <my-sub></my-sub>
+  </div>
+</template>
+
+<script>
+import add from './components/add.vue'
+import sub from "./components/sub.vue"
+
+export default {
+  components:{
+    "my-add":add,
+    "my-sub":sub
+  },
+  data(){
+    return{
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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>

vuex_demo1/src/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store'
+
+Vue.config.productionTip = false
+
+new Vue({
+  store,
+  render: h => h(App)
+}).$mount('#app')

vuex_demo1/src/store/index.js

@@ -0,0 +1,58 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    //存放全局共享数据
+    count:0
+  },
+  getters: {
+    showNum(state){
+      let newcount = state.count *2
+      return '测试getters,更新的数量为count*2: '+ newcount
+    },
+    showNum1(state){
+      let newcount = state.count *3
+      return '测试getters,更新的数量为为count*3: '+ newcount
+    }
+  },
+  mutations: {
+    //变更store中的数据
+    add(state){
+      state.count++
+    },
+    addN(state,step){
+      state.count+=step
+    },
+    sub(state){
+      state.count--
+    },
+    subN(state,step){
+      state.count-=step
+    },
+    xc(state,step){
+      state.count=state.count * step
+    }
+  },
+  actions: {
+    addAsync(context){
+      setTimeout(()=>{
+        context.commit('add')
+      },1000)
+    },
+    addNAsync(context,step){
+      setTimeout(()=>{
+        context.commit('addN',step)
+      },1000)
+    },
+    subNAsync(context,step){
+      setTimeout(()=>{
+        context.commit('subN',step)
+      },1000)
+    }
+  },
+  modules: {
+  }
+})