new

project/src/store/index.js

@@ -4,14 +4,32 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+  /* 用于存储应用程序的状态数据 */
   state: {
+    count: 10,
+    price: 20
   },
+  /* 类似于计算属性，用于进行一些逻辑操作 */
   getters: {
+    amount(state){
+      return state.count * state.price
+    }
   },
+  /* 用于修改state中的数据，是同步操作 */
   mutations: {
+    add(state){
+      state.price ++
+    }
   },
+  /* 用于处理异步操作或者比较复杂逻辑   并且提交mutations来修改state */
   actions: {
+    reduces({commit}){
+      setTimeout(()=>{
+        commit('add')
+      },1500)
+    }
   },
+  /* 将store分割成多个模块 每个模块可以有自己的 state  getters mutations actions */
   modules: {
   }
 })

project/src/views/Rd.vue

@@ -1,13 +1,45 @@
 <template>
-  <h1>我是RD</h1>
+  <div>
+    <h1>我是RD</h1>
+    <br>
+    count：{{number}}
+    <br>
+    price； {{price}}
+    <br>
+    {{amount}}
+    <br>
+    <button @click="add()">+1</button>
+    <button @click="reduceHandle()">延迟++</button>
+  </div>
 </template>
 
 <script>
+import {mapState,mapGetters,mapMutations} from 'vuex'
 export default {
-
-}
+  computed:{
+    number(){
+      return this.$store.state.count
+    },
+    price(){
+      return this.$store.state.price
+    },
+    // ...mapState(['count','price'])
+    amount(){
+      return this.$store.getters.amount
+    }
+    /* ...mapGetters(['amount']) */
+  },
+  methods:{
+    // addHandle(){
+    //   // this.$store.commit('add')
+    // }
+    ...mapMutations(['add']),
+    reduceHandle(){
+      this.$store.dispatch('reduces')
+    }
+  }
+};
 </script>
 
 <style>
-
 </style>