vue

vue2.0/vue高阶/project1.0/src/App.vue

@@ -1,54 +1,91 @@
 <template>
   <div id="app">
+    <h2>Vuex</h2>
+    <!-- 
+      State:
+        1.this.$store.state.xxx 在生命周期，或者适当的方法中
+        2.$store.state.xxx 在template模板中
+        3.引入mapState 在computed中 ...mapState(['xxx'])
+     -->
+    <p>1.名字{{ name1 }},来自{{ address1 }}</p>
+    <p>2.名字{{ $store.state.name }},来自{{ $store.state.address }}</p>
+    <p>3.名字{{ name }},来自{{ address }}</p>
+    <hr>
+    <!-- 
+      Getters
+        1.this.$store.getters.xxx 在生命周期，或者适当的方法中
+        2.$store.getters.xxx 在template模板中
+        3.引入mapGetters 在computed中 ...mapGetters(['xxx']
+     -->
+    <p>1.数值：{{count1}}</p>
+    <p>2.数值：{{$store.getters.newCount}}</p>
+    <p>2.数值：{{newCount}}</p>
+    <hr />
+    <h2>组件库</h2>
     <el-button type="primary">主要按钮</el-button>
     <el-carousel indicator-position="outside" :autoplay="false">
-      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
+      <el-carousel-item v-for="(item, index) in bannerList" :key="index">
         <!-- <h3>{{ item.imgUrl }}</h3> -->
-        <img :src="item.imgUrl" alt="">
+        <img :src="item.imgUrl" alt="" />
       </el-carousel-item>
     </el-carousel>
     <hr />
     <el-table :data="tableData" style="width: 80%">
       <el-table-column prop="prodName" label="商品名称"> </el-table-column>
-      <el-table-column prop="price" label="商品价格" width="180"> </el-table-column>
+      <el-table-column prop="price" label="商品价格" width="180">
+      </el-table-column>
       <el-table-column prop="brief" label="商品描述"> </el-table-column>
     </el-table>
   </div>
 </template>
 <script>
-    import axios from 'axios';
-    export default {
-      data() {
-        return {
-          bannerList:[],
-          tableData: []
-        }
-      },
-      created() {
-        this.init()
-      },
-      methods: {
-        init() {
-          // 走马灯
-          axios.get("http://shop-api.edu.koobietech.com/indexImgs")
-          .then(res => {
-            this.bannerList = res.data.data;
-          })
-          .catch(err => {
-            console.log(err,'失败')
-          })
-          // 表格
-          axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList")
-          .then(res => {
-            this.tableData = res.data.data[0].productDtoList;
-            console.log(this.tableData,'res')
-          })
-          .catch(err => {
-            console.log(err,'失败')
-          })
-        }
-      }
-    }
+import axios from "axios";
+import { mapState, mapGetters } from "vuex";
+export default {
+  data() {
+    return {
+      bannerList: [],
+      tableData: [],
+      name1: "",
+      address1: "",
+      count1: null,
+    };
+  },
+  created() {
+    this.init();
+    console.log(this.$store, "222");
+    this.name1 = this.$store.state.name;
+    this.address1 = this.$store.state.address;
+    this.count1 = this.$store.getters.newCount;
+  },
+  computed:{
+    ...mapState(['name','address']),
+    ...mapGetters(['newCount'])
+  },
+  methods: {
+    init() {
+      // 走马灯
+      axios
+        .get("http://shop-api.edu.koobietech.com/indexImgs")
+        .then((res) => {
+          this.bannerList = res.data.data;
+        })
+        .catch((err) => {
+          console.log(err, "失败");
+        });
+      // 表格
+      axios
+        .get("http://shop-api.edu.koobietech.com/prod/tagProdList")
+        .then((res) => {
+          this.tableData = res.data.data[0].productDtoList;
+          console.log(this.tableData, "res");
+        })
+        .catch((err) => {
+          console.log(err, "失败");
+        });
+    },
+  },
+};
 </script>
 <style lang="scss">
 .el-carousel__item h3 {

vue2.0/vue高阶/project1.0/src/store/index.js

@@ -2,11 +2,22 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
-
+/***
+ * vuex 小项目几乎不用
+ * 状态管理库 放置公用状态
+ */
 export default new Vuex.Store({
   state: {
+    // 放置/存储数据 
+    name:"Lucy",
+    address:"哈尔滨",
+    count: 1
   },
   getters: {
+    // 类似于computed
+    newCount(state) {
+      return state.count * 2;
+    }
   },
   mutations: {
   },