vue2

vue/高阶/project2/src/store/index.js

@@ -4,11 +4,17 @@ import VueX from 'vuex';
 Vue.use(VueX);
 
 export default new VueX.Store({
+    // 类似于data 唯一数据源 存放全局状态 所有共享状态都在这里定义
     state:{
-
+        userName:"图图",
+        age: 3,
+        count: 10
     },
+    // 数据缓存、只读 相当于state的派生数据 类似于computed
     getters:{
-
+        doubleCount(state) {
+            return state.count * 2;
+        }
     },
     mutations:{
 
@@ -17,6 +23,6 @@ export default new VueX.Store({
 
     },
     modules:{
-        
+
     }
 })

vue/高阶/project2/src/views/Home.vue

@@ -1,13 +1,36 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="home">首页</div>
+  <div class="home">
+     <!-- state -->
+    <h1>我叫{{ name1 }}</h1>
+    <h1>我叫{{ $store.state.userName }}</h1>
+    <h1>我叫{{ userName }},今年{{ age }}岁</h1>
+    <!-- getters -->
+    <h1>数量{{ count1 }}</h1>
+    <h1>数量{{ $store.getters.doubleCount}}</h1>
+    <h1>数量{{ doubleCount }}</h1>
+  </div>
 </template>
 
 <script>
+import { mapState,mapGetters } from 'vuex';
 export default {
   name:"Home",
+  data() {
+    return {
+      name1:"",
+      count1:""
+    }
+  },
   created() {
-    console.log("首页")
+    this.name1 = this.$store.state.userName;
+    this.count1 = this.$store.getters.doubleCount;
+    console.log("首页",this.$store.getters.doubleCount)
+    // console.log(mapState)
+  },
+  computed:{
+    ...mapState(['userName','age']),
+    ...mapGetters(['doubleCount'])
   }
 }
 </script>