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

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

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

自定義輸入組件：

使用組件：

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

創(chuàng)建一個(gè)空的 vue 實(shí)例，然后將該實(shí)例添加到 vue 的原型上，通過該實(shí)例觸發(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 實(shí)現(xiàn)任意組件傳遞參數(shù)
Vue.prototype.$bus=bus

//ChildPage.vue

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

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

理解：

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

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

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

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

Vuex 文檔中說：

通過定義和隔離狀態(tài)管理中的各種概念并通過強(qiáng)制規(guī)則維持視圖和狀態(tài)間的獨(dú)立性，我們的代碼將會(huì)變得更結(jié)構(gòu)化且易維護(hù)。

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

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

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

mutations 只能是 同步操作；

mutations 和 actions 都可直接更改 state，但是當(dāng) action 含有異步操作時(shí)，會(huì)使得數(shù)據(jù)變化混亂，難以跟蹤，使得調(diào)試?yán)щy；

基于以上原因，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) {
                      //請求后臺(tái)數(shù)據(jù)
              api.getMusicUrlResource(id).then(res => {
                let url = res.data.data[0].url;
              })
              .catch((error) => {  // 錯(cuò)誤處理
                  console.log(error);
             });
          }
    }
});

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

我們看看 Vuex 和 store 是什么？

Vuex：

Vuex 它實(shí)際上是一個(gè)對象，里面包含了Store這一構(gòu)造函數(shù)，還有幾個(gè)mapActions、mapGetters、mapMutations、mapState、install 方法。

store：

store 是 Vuex 的實(shí)例（廢話）。

實(shí)際項(xiàng)目中往往將 store 多帶帶放置的一個(gè)文件夾在，mutations 、getters、actions 等屬性各自用一個(gè)文件保存。

state 對象的屬性時(shí) Vuex 管理的狀態(tài)，類似單個(gè)組建的 data。

訪問 getters:

this.$store.state；

使用 mapState 映射成計(jì)算屬性，推薦。

//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;
            },
            //計(jì)算屬性名和 state 屬性名相同:傳入數(shù)組
            // ...mapState(["count","name"]),
            // 計(jì)算屬性名和 state 屬性不同，傳入對象
            ...mapState({
                name: state => state.name,
                count: state => state.count,
                countAlias: "count",
                //為了使用 this 不能使用箭頭函數(shù)
                countPlusLocalCount(state) {
                    return state.count + this.localCount;
                }
            })
        },
}

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

訪問 getters:

this.$store.getters；

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

方法訪問，不會(huì)緩存。

// getters.js
export default {
    fullName: state => state.firstName + " " + state.lastName,
    //在getters 中訪問 getters
    info: (state, getters) => {
        return state.age + "," + getters.fullName;
    },
    //為了傳遞參數(shù)，返回一個(gè)函數(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 文檔