vuex

package-lock.json

@@ -11251,6 +11251,11 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-3.1.2.tgz",
+      "integrity": "sha1-ooY/QAWqc/JYflXD+t8/AfacfU0="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz",

package.json

@@ -17,7 +17,8 @@
     "stylus-loader": "^3.0.2",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^2.6.7",
-    "vue-router": "^3.1.5"
+    "vue-router": "^3.1.5",
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.2.0",

src/main.js

@@ -3,6 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import fastClick from "fastclick";
 import VueAwesomeSwiper from "vue-awesome-swiper";
+import store from "./store";
 // CSS文件引入
 import "styles/reset.css";
 import "styles/border.css";
@@ -15,5 +16,6 @@ Vue.use(VueAwesomeSwiper)
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount("#app");

src/pages/city/components/list.vue

@@ -5,14 +5,19 @@
         <div class="title border-topbottom">当前城市</div>
         <div class="button-list">
           <div class="button-wrapper">
-            <div class="button">北京</div>
+            <div class="button">{{ this.currentCity }}</div>
           </div>
         </div>
       </div>
       <div class="area">
         <div class="title border-topbottom">热门城市</div>
         <div class="button-list">
-          <div class="button-wrapper" v-for="item of hot" :key="item.id">
+          <div
+            class="button-wrapper"
+            v-for="item of hot"
+            :key="item.id"
+            @click="handleCityClick(item.name)"
+          >
             <div class="button">{{ item.name }}</div>
           </div>
         </div>
@@ -24,6 +29,7 @@
             class="item border-topbottom"
             v-for="innerItem of item"
             :key="innerItem.id"
+            @click="handleCityClick(innerItem.name)"
           >
             {{ innerItem.name }}
           </div>
@@ -35,6 +41,8 @@
 
 <script scoped>
 import BScroll from "better-scroll";
+import { mapState } from "vuex";
+
 export default {
   name: "CityList",
   props: {
@@ -42,8 +50,18 @@ export default {
     cities: Object,
     letter: String
   },
-  mounted: function() {
-    this.BScroll = new BScroll(this.$refs.wrapper);
+  computed: {
+    ...mapState({
+      currentCity: "city"
+    })
+  },
+  methods: {
+    handleCityClick: function(city) {
+      // 不存在大量同步操作或者异步操作，所以组件可以直接调用mutations，而不需要actions转发
+      // this.$store.dispatch("changeCity", city);
+      this.$store.commit("changeCityMutations", city);
+      this.$router.push("/");
+    }
   },
   watch: {
     letter: function() {
@@ -52,6 +70,9 @@ export default {
         this.BScroll.scrollToElement(element);
       }
     }
+  },
+  mounted: function() {
+    this.BScroll = new BScroll(this.$refs.wrapper);
   }
 };
 </script>

src/pages/city/components/search.vue

@@ -14,6 +14,7 @@
           class="search-item border-bottom"
           v-for="item of list"
           :key="item.id"
+          @click="handleCityClick(item.name)"
         >
           {{ item.name }}
         </li>
@@ -32,6 +33,12 @@ export default {
   props: {
     cities: Object
   },
+  methods: {
+    handleCityClick: function(city) {
+      this.$store.commit("changeCityMutations", city);
+      this.$router.push("/");
+    }
+  },
   data: function() {
     return {
       keyword: "",

src/pages/home/components/Header.vue

@@ -15,10 +15,12 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "HomeHeader",
-  props: {
-    city: String
+  computed: {
+    ...mapState(["city"])
   }
 };
 </script>
@@ -27,6 +29,7 @@ export default {
 // 引入styles文件夹中的variable.styl文件
 // 要在CSS中使用引入你需要在前面加个~
 @import '~styles/variable.styl'
+
 .header
     display flex
     line-height $headerHeight
@@ -52,7 +55,8 @@ export default {
         .search-icon
           margin-right .1rem
     .header-right
-        width 1.24rem
+        min-width 1.04rem
+        padding 0 .1rem
         float right
         text-align center
         color #ffffff

src/pages/home/home.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <home-header :city="city"></home-header>
+    <home-header></home-header>
     <home-swiper :list="swiperList"></home-swiper>
     <home-icons :list="iconList"></home-icons>
     <home-recommend :list="recommendList"></home-recommend>
@@ -30,7 +30,6 @@ export default {
   },
   data: function() {
     return {
-      city: "城市",
       swiperList: [],
       iconList: [],
       recommendList: [],
@@ -45,7 +44,6 @@ export default {
       res = res.data;
       if (res.ret && res.data) {
         const data = res.data;
-        this.city = data.city;
         this.swiperList = data.swiperList;
         this.iconList = data.iconList;
         this.recommendList = data.recommendList;

src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import state from "./state"
+import mutations from "./mutations"
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: state,
+  // 不存在大量同步操作或者异步操作，所以组件可以直接调用mutations，而不需要actions转发
+  // actions: {
+  //   changeCity: function(ctx, city) {
+  //     ctx.commit("changeCityMutations", city);
+  //   }
+  // },
+  mutations: mutations
+});

src/store/mutations.js

@@ -0,0 +1,10 @@
+export default {
+  changeCityMutations: function(state, city) {
+    state.city = city;
+    try {
+      if (localStorage.city) {
+        localStorage.city = city;
+      }
+    } catch (e) {}
+  }
+};

src/store/state.js

@@ -0,0 +1,10 @@
+let defaultcity = "上海";
+try {
+  if (localStorage.city) {
+    defaultcity = localStorage.city;
+  }
+} catch (e) {}
+
+export default {
+  city: defaultcity
+};