vuex是一個專門為vue.js設計的狀態管理模式，並且也可以使用devtools進行除錯。

在vuex出現之前，vue裡面的狀態是屬於‘單向資料流’。舉個官網的例子:

new Vue({
    // state
    data () {
        return {
            count: 0
        }
    },
    // view
    template: `<div>{{ count }} </div`,
    // actions
    methods: {
        increment () {
            this
 
.count++
        }
    }
})

其中

• state是一個數據源
• view以宣告的方式將state對映到檢視
• actions 響應在view上的使用者輸入導致的狀態變化
  

但是解決不了 多個元件共享狀態

所以vuex應運而生

簡單來說，就是共享的狀態用state來存放，用mutations來操作state，但是需要用store.commit來主動式的操作mutations。

下面來單獨介紹 state，getters，mutations，actions，modules

State

單一狀態樹
vuex使用單一狀態樹，那麼就可以用一個物件來包含全部的應用層級狀態。所以state就作為資料來源。
如何在元件中獲得vuex狀態？

這個是store/state.js中宣告的資料來源

這個是在元件中進行的引用

不過需要注意的是，在元件中進行引用之前，需要先在入門檔案中進行注入
即：

如果不在根例項中註冊store選項的話，那麼需要在每一個使用state的元件中都要匯入。

註冊之後，子元件只需要this.$store即可呼叫vuex。

Getters

有時候我們需要從state中派生出一些狀態，比如篩選一組列表，並且這個篩選後的資料是有其他元件要用的。那麼我們就需要把這個結果進行包裝，形成共享狀態。
例如：

computed:{
    doneTodosCount () {
        return this.$store.state.todos.filter(todo => todo.done).length
    }
}

如果說這個length是其他元件用的話，那麼如何做呢？

Getter就這樣應運而生了。

getters: {
    doneTodosCount: state => {
        return state.todos.filter(todo => todo.done).length
    }
}

Getter 會暴露為store.getters物件

所以很容易在任何元件中使用它：

computed: {
    doneTodosCount () {
        return this.$store.getters.doneTodosCount
    }
}

這是getters.js

這是元件中的引用

Mutations

更改Vuex的store中的狀態的唯一方法就是提交mutations。
Vuex中的mutations就像一個事件：每個mutations都有一個字串的事件型別（type）和一個回撥函式（handler）。這個回撥函式接受state作為第一個引數。

但是我們又不能直接來呼叫一個mutations的handler。要喚醒一個mutations handler，需要以相應的type來呼叫store.commit方法。

這個是在mutations.js中註冊的一些的事件

這是在元件中來觸發這個事件

當然，我們注意到，mutations中可以傳遞額外的引數，這個引數就叫做mutations的載荷。
在更多的情況下，載荷應該是一個物件。這樣可以包含更多的欄位。

但是mutations必須是同步函式。

那我們如何來非同步的更新State呢？

答案是： Actions

Actions

Actions類似於 mutations 不同的是：

• Actions 提交的是mutations，而不是直接變更狀態。
• Actions 可以包含任意非同步操作。

這也就形成了 actions —— mutations —— state 的過程

Actions函式接受一個與store例項具有相同方法和屬性的context物件，因此可以通過context.commit來提交一個mutations。但是如何觸發呢？

答案： store.dispatch

Modules

使用單一狀態樹，導致應用的所有狀態都集中到了一個很大的物件。所以，store物件容易變得臃腫。

為了解決這個問題， Vuex允許咱們把store進行一個功能拆分，分割成不同的模組（module）。每個模組都擁有自己的store，mutations，action，getters。

專案結構

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API請求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我們組裝模組並匯出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模組
        └── products.js   # 產品模組

總結：

vuex可以用在單頁面上的元件間共享狀態。不適合用於跨頁面的通訊。
另外，對於一些跨頁面的資料或者關鍵性的資料，可以通過localStorage，sessionStorage