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

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

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

自定義輸入組件：

使用組件：

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

創(chuàng)建一個空的 vue 實例，然后將該實例添加到 vue 的原型上，通過該實例觸發(fā)事件和監(jiān)聽事件來在不同組件之間共享數(shù)據(jù)。

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

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

import Bus from "./lib/bus"
// 通過 bus 實現(xiàn)任意組件傳遞參數(shù)
Vue.prototype.$bus=bus

//ChildPage.vue

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

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

理解：

狀態(tài)：數(shù)據(jù)，相當于組件內部的data 的返回值，Vue 是數(shù)據(jù)驅動的，數(shù)據(jù)變化往往會表現(xiàn)在視圖層；

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

管理：處理保存數(shù)據(jù)，還可計算、處理數(shù)據(jù)；

所有組件狀態(tài)：所有組件都可獲取倉庫中的數(shù)據(jù)，即一個項目只有一個數(shù)據(jù)源。

Vuex 文檔中說：

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

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

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

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

mutations 只能是 同步操作；

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

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

在開發(fā)工具中也可提交 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中的數(shù)據(jù)
          state.count = payload.number;
       }
      },
      // actions可以是異步操作
      actions: {      //放置actions方法
           actionName({ commit }) {
              //dosomething
             commit("mutationName")
           },
           getSong ({commit}, id) {
                      //請求后臺數(shù)據(jù)
              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這一構造函數(shù)，還有幾個mapActions、mapGetters、mapMutations、mapState、install 方法。

store：

store 是 Vuex 的實例（廢話）。

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

state 對象的屬性時 Vuex 管理的狀態(tài)，類似單個組建的 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 屬性名相同:傳入數(shù)組
            // ...mapState(["count","name"]),
            // 計算屬性名和 state 屬性不同，傳入對象
            ...mapState({
                name: state => state.name,
                count: state => state.count,
                countAlias: "count",
                //為了使用 this 不能使用箭頭函數(shù)
                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;
    },
    //為了傳遞參數(shù)，返回一個函數(shù)，
    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",
            //不能寫成函數(shù)
            // fullNameAlias2(state){
            //     return state.name+"，你好"+this.$store.getters.fullName;
            // }
        })
    },
    mounted() {
        console.log(this.personInfo("成都"))
        console.log(this.myInfo)
    }
}

理解Vuex，看這篇就夠了

vuex 文檔