在vuex的官網https://vuex.vuejs.org中，提到的核心概念一共有5個，分別是State、Getter、Mutation、Action和Module，在上一篇隨筆中，我們主要用到其中的State和Mutation，接下來，我們來分析剩下幾個使用方法，在這裏，是在上一篇的基礎上面完成的。

這是上一篇結束時實現的功能，現在接著這個項目繼續分析。

Getter

在官網中對getter的定義是：就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。也就是說， 只有改變state裏面的count數據的時候會觸發 getters裏面的方法 獲取新的值。例如，現在希望每次改變count的時候，它都能變為當前的兩倍，可以這樣做：

1，定義方法

2，暴露

3，使用

當點擊增加按鈕後，觸發了mutations，實現了自增，所以前面一個數字變為了2，數據出現自增後，說明數據發生了改變，一旦數據改變，就會觸發getter裏面的方法，對數據實現乘以2，所以後面一個數就變為了4。

Action

官網中對於action的定義是：類似於mutation，不同在於action提交的是mutation，而不是直接變更狀態；action可以包含任何異步操作。下面還是使用例子要演示。

首先是要在store.js中定義並暴露，

因為上面已經說過了，action提交的是mutation，而不是直接變更狀態，所以這裏的方法裏面寫入的就是在mutations中定義的方法。

我們在Home.vue中使用，在使用的時候需要註意的是，前面是通過事件觸發mutations裏面的自曾方法，現在需要改變這種方法，使用action裏的方法了，如下：

實現的效果和上面是一樣的。

綜合使用

最後通過一個案例來總結vuex，在這個案例中，會使用到數據請求，所以要先安裝vue-resource

然後在main.js中引入

在News.vue文件中請求並渲染數據。

然後再運行項目，我們會發現，每次點擊新聞頁面的時候，都會重新請求數據。

多次重復請求並不是友好的操作，所以，接下來就需要用vuex來實現數據持久化了，

1，在store.js中定義一個數組存儲新聞數據。

2，在mutations中定義一個添加數據的方法。

3，在請求數據的時候，將請求的數據存儲到state裏面中，所以要觸發mutations中的添加方法。

4，在頁面渲染的時候，先從state裏面獲取數據，對獲取的數據進行判斷，如果有數據不為空，即直接進行渲染，如果數據為空則進行上一步的數據請求操作。這樣就可以避免多次重復請求數據了。

完整代碼下載：點這裏

vuex狀態管理2