vuex 實現vue不同組件之間的狀態共享

一、什么是vuex？

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

二、為什么要使用vuex？

一般情況我們可以通過props、$emit在父子組件之間來回穿梭傳值？抑或通過bus在組件之間共享值？無論哪種方式，都是極其麻煩或者可讀性非常差的。而Vuex的引入很好的解決了這個問題，它把一些共享的屬性（狀態）集中的管理起來，使得你只需要關注Vuex中定義的state就可以了，state的變化會自動響應到引用了它的視圖（頁面組件）

Vuex很好的解決了以下兩個問題：

1、多個視圖依賴於同一狀態。
2、來自不同視圖的行為需要變更同一狀態。

三、簡單示例

1、安裝包

NPM

npm install vuex --save

Yarn

yarn add vuex

2、建議把vuex單獨放在一個模塊

src目錄下新建 vuex 文件夾 新建 store.js

import {createStore} from 'vuex';
const store=createStore({
    state(){
        return{
            count:1
        }
    },
    mutations:{
        increment(state){
            state.count++
        }
    }
})
export default store     

3、其它組件中使用

this.$store.state.count
this.$store.commit("increment")