vuex解決的是兄弟組件之間傳信，雖說也可以用總線bus解決屁桑，但是一旦項目大了傳的東西一多就不如vuex方便医寿，總線bus在簡單傳值用的比較多。
這里City頁面和Home頁面沒有共同的父組件->使用vuex框架

City和Home組件實現(xiàn)數(shù)據(jù)傳遞.png

1.vuex

vuex——vue狀態(tài)管理模式
包含三部分：

Actions：存放異步操作或者復(fù)雜的批操作
Mutations: 存放為state的成員操作
State：存放公用數(shù)據(jù)蘑斧，驅(qū)動應(yīng)用的數(shù)據(jù)源
當(dāng)組件使用數(shù)據(jù)時靖秩，首先經(jīng)過Actions再經(jīng)過Mutations，再到State里竖瘾。（單向數(shù)據(jù)獲裙低弧）。不過不一定會經(jīng)過Actions捕传，有時候可以跳過惠拭。

vuex工作流程.png

2.傳遞city信息展示

點擊當(dāng)前城市"廈門" 進(jìn)入到城市選擇頁面，對應(yīng)的當(dāng)前城市“廈門”乐横，點擊下面熱門城市能替換上面的當(dāng)前城市求橄，返回首頁城市也相應(yīng)更改。

city傳遞展示.gif

3.vuex使用

3.1 當(dāng)前城市信息讀取

以前的當(dāng)前城市信息都是寫死的葡公，現(xiàn)在在src目錄下創(chuàng)建store罐农，在里面創(chuàng)建index.js。

store用來存放公用數(shù)據(jù).png

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    // 創(chuàng)建數(shù)據(jù)
    state: {
        city: '廈門'
    },
    actions: {
        changeCity(ctx, city) {
            ctx.commit('changeCity', city)
        }
    },
    mutations: {
        changeCity(state, city) {
            state.city = city
        }
    }
})

在main.js里引用 import store from './store/index'催什，并在new Vue()里注冊組件涵亏。此時，定義好的store就通過總組件Vue分配到各個組件里蒲凶，直接{{this.$store.state.city}}就可使用气筋。
這樣在Header.vue和List.vue里就可以動態(tài)獲取city，而不是用寫死的數(shù)據(jù)旋圆。

3.2 點擊"熱門城市"切換"當(dāng)前城市"

在熱門城市里綁定函數(shù) @click="handleCityClick(item.name)"宠默，函數(shù)里接收了一個參數(shù)item.name，通過dispatch方法傳到Actions里的changeCity函數(shù)中灵巧，再通過commit方法傳到mutations的函數(shù)里搀矫，改變Store的值抹沪，進(jìn)而所有接收city參數(shù)的地方都發(fā)生了改變。

methods:{
        handleCityClick(city){
            this.$store.dispatch('changeCity',city)
        }
    }

同樣瓤球，在城市列表所有的<li>里定義函數(shù)融欧，點擊就改變當(dāng)前城市。

點擊阿拉善盟后當(dāng)前城市顯示.png

3.3 頁面跳回首頁

在點擊城市函數(shù)里加入一句this.$router.push('/')卦羡，就是返回頁面到首頁'/'里噪馏。

 handleCityClick(city){
            this.$store.dispatch('changeCity',city)
            this.$router.push('/')
        }

點擊城市返回首頁.gif

4.localStorage 頁面城市存儲

如上，雖然點擊更新了城市绿饵，但是頁面一刷新欠肾，還是回到了“廈門”。這就需要把數(shù)據(jù)保存下來蝴罪，再下次打開時還是上次的數(shù)據(jù)董济。