一、Vuex是什麼？

vuex是用來專門管理vue元件中的共享資料的狀態管理模式。那vuex中狀態又是什麼東東呢？
我們在學習vuex時，我們先來回顧一下vuejs元件之間的資料通訊有哪幾種：

1、父元件向子元件發出通訊

• 通過props關鍵字，也就是父元件繫結一個屬性，並且把 這個屬性通過關 props[‘attr’]傳遞給子元件。

2、子元件向父元件發出通訊

• 子元件通過關鍵字emit(‘eventType’)向父元件發出通訊，父元件通過繫結該屬性來觸發dom的更新。

3、非父子元件的通訊

• 非父子元件的通訊通常通過例項化一個空的vue構造器來管理狀態。
• const bus = new Vue()
• 然後在元件A內容通過bus.$emit(‘event’,params)發出一個事件。
• 元件B內通過bus.$on(‘event’,params => console.log(params))來監聽元件A發來的請求。

*但是，隨著我們專案資料越來越龐大，上面幾種方式資料通訊有一些不好的地方。

• 多個元件共享一個數據時，每個元件都需要props或者$emit會顯得特別的麻煩。
• 資料管理不太明顯，單向資料的簡潔性遭到破壞，後期維護乏力。

vuex中的state屬性，學習該屬性時我們先來認識下什麼是vuex狀態?

• 狀態也稱為資料來源，是vuex把元件中共享的data把它抽離出來放在單獨的state屬性下面，state它是一個物件，可以管理多個狀態。

現在我們來看一個小例子，比如我有兩個元件A和元件B

在專案根目錄下新建一個store資料夾，並在該資料夾下新建一個index.js檔案，為了在所有子元件內都能使用這個store,我們在入口js檔案(main.js)引入store資料夾下的index.js（通過import store from ‘./store’）,再把store掛載在vue例項下面作為vue例項中的一個屬性store

store/index.js

Vue.use(Vuex);
export default new Vuex.Store({
state: { count: 0 }
});

元件A：
export default {
computed: { //通過計算屬性來返回count狀態，當狀態發生改變時，都會重新計算結果
count: function(){
return this.$store.state.count //
}
}
}

當A元件需要獲取多個狀態時，我們可以通過vuex提供的mapState輔助函式來幫助我們生成計算屬性，方便很多。

元件A：
import { mapState } from ‘vuex’ //單獨引入mapState方法

export default {
computed: mapState([‘狀態1’,’狀態2’,…])
}

*但是，如果如何將它與區域性計算屬性混合使用呢？我們可以通過es6提供的物件運算子…來合併多個物件。以便我們將最終物件傳遞給computed屬性。

export default {
computed: {
…mapState([‘狀態1’,’狀態2’,…]),
arrs: function(){ //這裡是我們的區域性計算屬性
return arr.filter(item => item.charCodeAt() > 110).join(”);
}
}
}

最後我們以後要增加其他資料時，直接可以把資料放在這個倉庫(store)檔案下，需要的該狀態時就直接通過mapState方法來引入該狀態。從而觸發我們檢視的更新。