摘要：在中添加原型屬性通過實現任意組件傳遞參數在掛載聲明周期函數中監聽自定義事件給傳遞數據由觸發一個事件，在接收數據的組件中監聽該事件狀態管理隨著組件的增加，通過以上方式共享數據，會越來越復雜，提供了狀態管理插件。

父子組件之間往往使用props和 $emit 實現數據共享，任意組件可通過bus（一個vue實例）作為橋梁，實現數據共享。當項目中組件越來越多時，組件之間的數據共享變得復雜，難以維護。使用 Vuex 可集中管理組件之間的數據（狀態），使組件之間的數據共享變得簡單。

父→（props）子組件；子→（$meit）父組件，即子組件自定義一個事件，在父組件中監聽該事件。

自定義輸入組件：

使用組件：

因為 v-model 指令是雙向綁定的，我們也可以用其來實現值的傳遞：

創建一個空的 vue 實例，然后將該實例添加到 vue 的原型上，通過該實例觸發事件和監聽事件來在不同組件之間共享數據。

//bus.js
import Vue from "vue";
let Bus = new Vue();
export default Bus;

在 main.js 中添加原型屬性：

import Bus from "./lib/bus"
// 通過 bus 實現任意組件傳遞參數
Vue.prototype.$bus=bus

//ChildPage.vue

隨著組件的增加，通過以上方式共享數據，會越來越復雜，vue 提供了狀態管理插件 Vuex。

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式；集中存儲和管理應用的所有組件狀態。

理解：

狀態：數據，相當于組件內部的data 的返回值，Vue 是數據驅動的，數據變化往往會表現在視圖層；

集中存儲：Vue 只關注視圖層，Vuex 提供了一個倉庫（store）來保存數據，使得數據和視圖分離；

管理：處理保存數據，還可計算、處理數據；

所有組件狀態：所有組件都可獲取倉庫中的數據，即一個項目只有一個數據源。

Vuex 文檔中說：

通過定義和隔離狀態管理中的各種概念并通過強制規則維持視圖和狀態間的獨立性，我們的代碼將會變得更結構化且易維護。

Vuex 就是通過隔離數據、拆分改變數據的方式使得數據和視圖獨立，數據被組件數共享。

虛線內部的三個部分組成了一個Store,組件的數據保存在 State 中，用戶和組件交互時，通過組件內的方法分發（dispatch）一個動作（action，有點像事件），動作會提交（Commit）一個更改（Mutation，也類似事件），改變 State 中的數據，然后獲取數據渲染到視圖上。

actions 可以是 異步操作，故可在action中調用后臺接口獲取新的數據；

mutations 只能是 同步操作；

mutations 和 actions 都可直接更改 state，但是當 action 含有異步操作時，會使得數據變化混亂，難以跟蹤，使得調試困難；

基于以上原因，Vuex 規定只能是 mutations 來改變 state。

在開發工具中也可提交 mutations。

//main.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);// Vuex 是 Vue 的插件

let store = new Vuex.Store({
    state: {     //放置state的值
        count: 0,
        str:"abcd234"
    },
      getters: {   //放置getters方法
          strLen: state => state.str.length
      },
      // mutations只能是同步操作
      mutations: {   //放置mutations方法
       increment(state, payload) {
          //在這里改變state中的數據
          state.count = payload.number;
       }
      },
      // actions可以是異步操作
      actions: {      //放置actions方法
           actionName({ commit }) {
              //dosomething
             commit("mutationName")
           },
           getSong ({commit}, id) {
                      //請求后臺數據
              api.getMusicUrlResource(id).then(res => {
                let url = res.data.data[0].url;
              })
              .catch((error) => {  // 錯誤處理
                  console.log(error);
             });
          }
    }
});

new Vue({
  el: "#app",
  store  //  通過 this.store 訪問 store
});

我們看看 Vuex 和 store 是什么？

Vuex：

Vuex 它實際上是一個對象，里面包含了Store這一構造函數，還有幾個mapActions、mapGetters、mapMutations、mapState、install 方法。

store：

store 是 Vuex 的實例（廢話）。

實際項目中往往將 store 多帶帶放置的一個文件夾在，mutations 、getters、actions 等屬性各自用一個文件保存。

state 對象的屬性時 Vuex 管理的狀態，類似單個組建的 data。

訪問 getters:

this.$store.state；

使用 mapState 映射成計算屬性，推薦。

//state.js
export default {
    count: 100,
    name: "Jack*Zhou",
    firstName: "Jack",
    lastName: "Zhou",
    age: 24,
    profession: "web deveploper",
    company: "Baidu"
}

組件：

import {mapState} from "vuex"
export default {
    data(){
        return {
            localCount:0
        }
    },
    computed: {
            localCount() {
                return this.$store.state.count + 1;
            },
            //計算屬性名和 state 屬性名相同:傳入數組
            // ...mapState(["count","name"]),
            // 計算屬性名和 state 屬性不同，傳入對象
            ...mapState({
                name: state => state.name,
                count: state => state.count,
                countAlias: "count",
                //為了使用 this 不能使用箭頭函數
                countPlusLocalCount(state) {
                    return state.count + this.localCount;
                }
            })
        },
}

getters 是對 state 的加工，類似于組件中的 data 和計算屬性的關系。getters 的返回值會被緩存起來，只有當它的依賴改變，才會重新計算。

訪問 getters:

this.$store.getters；

使用 mapGetters 將 getters 映射成計算屬性，推薦；

方法訪問，不會緩存。

// getters.js
export default {
    fullName: state => state.firstName + " " + state.lastName,
    //在getters 中訪問 getters
    info: (state, getters) => {
        return state.age + "," + getters.fullName;
    },
    //為了傳遞參數，返回一個函數，
    personInfo: (state, getters) => (city) => {
        return {
            name: getters.fullName,
            age: state.age,
            company: state.company,
            city
        }
    }
}

使用 getters:

import { mapGetters } from "vuex"
export default {
    name: "Store",
    computed: {
        ...mapGetters(["fullName", "info", "personInfo"]),
        myInfo() { return this.personInfo("杭州") },
        ...mapGetters({
            fullNameAlias1: "fullName",
            //不能寫成函數
            // fullNameAlias2(state){
            //     return state.name+"，你好"+this.$store.getters.fullName;
            // }
        })
    },
    mounted() {
        console.log(this.personInfo("成都"))
        console.log(this.myInfo)
    }
}

理解Vuex，看這篇就夠了

vuex 文檔