什么是vuex？
按照官網的說法，Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
vuex的組成
vuex由五個部分組成，分別是State，Mutation，Action，Module，Getter。
| State | 共享狀態（即變量） |
|---|---|
| Mutation | 更改vuex的store中state的唯一方法，只有通過提交mutation才能修改狀態（變量值） |
| Action | 類似mutation，修改store中的狀態。但是剛才說過只有通過提交mutation才能修改狀態，所以Action也是通過提交mutation修改store中的狀態 ，與Mutataion不同的是Action支持異步操作 |
| Module | 模塊，在大型項目中為了方便狀態的管理和協作開發將store拆分為多個子模塊（modules），每個子模塊擁有完整的state、mutation、action、getter。（這里先不介紹） |
| Getter | 基於state的派生狀態，可理解為組件中的計算屬性 |
為什么使用vuex？
-
多個視圖依賴於同一狀態
-
來自不同視圖的行為需要變更同一狀態
對於問題一，傳參的方法對於多層嵌套的組件將會非常繁瑣，並且對於兄弟組件間的狀態傳遞無能為力。
對於問題二，我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。
其實vuex通俗點可以理解為響應式的全局變量，作用也與我們在C語言，C++，Java中的全局變量（靜態變量）有類似之處。
什么情況下使用 vuex？
Vuex 可以幫助我們管理共享狀態，並附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。但是，如果您需要構建一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。
vuex安裝（需先安裝vue-cli）
1.cd到自己的項目目錄下
2.輸入命令：npm install vuex --save
如果出現以下提示，則說明安裝成功
如果出現以下提示，則需切換到管理員模式下的命令行，再執行cd和安裝操作
vue的使用
可能說到這里還有很多人還是不太理解為什么要使用vuex，雖然剛剛已經解釋過了。
舉個例子：假設要統計兩個頁面的所有按鈕點擊總次數。我們設置一個count來代表它。當用戶從page1跳轉到page2的時候，如何知道用戶在page1中點擊了多少下呢？在沒有使用vuex的時候我們通常是使用組件或路由傳參來傳遞count以達到統計的目的。當page1跳轉到page2時，傳遞count到page2，反之亦然。當只有兩個界面的時候，這種做法完全沒有問題。如果有要統計十個界面的所有按鈕點擊總次數呢？這將是一個巨大的麻煩。所以下面也以這個例子來學習一下vuex。
1.首先，新建好所需文件夾和文件，以供等下的學習使用。
在src目錄下新建store和pages文件夾，store文件夾里面新建五個文件，分別是store.js，state.js，actions.js，mutations.js，getters.js。pages文件夾里面新建兩個文件，分別是page1.vue，page2.vue。
2.然后進行配置
（1）在main.js引入、注冊store
（2）在index.js中添加路由
import Vue from 'vue' import Router from 'vue-router' import page1 from '../pages/page1' import page2 from '../pages/page2' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'page1', component: page1 }, { path: '/page1', name: 'page1', component: page1 }, { path: '/page2', name: 'page2', component: page2 } ] })
（3）在store.js中添加
import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutations' import actions from './actions' import getters from './getters' Vue.use(Vuex) export default new Vuex.Store({ state, mutations, actions, getters, })
3.完成以上步驟就可以初步使用vuex了
（1）state
在state.js添加狀態變量count，並設置初值為0
export default {
count:'0' }
通過"this.$store.state.變量名"可以訪問訪問狀態變量。在page1中添加以下代碼，就可以顯示為count賦的初值
<template>
<div>總數是：{{this.$store.state.count}}</div>
</template>
<script>
export default {
}
</script>
當然，如果這個變量在這個頁面只出現一次你可以這么寫，但是如果經常出現你每次都使用"this.$store.state.變量名"將是一件麻煩的事情。
一種更簡便的方法是使用計算屬性返回count的值
此外，還可以使用mapState來映射state中的狀態變量，這樣就可以直接使用count
<template>
<div>
總數是：{{count}}
</div>
</template>
<script>
export default { //映射count,this.count就是this.$store.state.count,相當於把state中的count變為組件的變量 computed: mapState(["count"]) } </script>
（2）mutation
之前說過，只有通過mutation才能更改state中變量的值。因此，可以在mutations.js中添加修改state中count的方法用於實現點擊次數統計，如下
export default { addCount(state) { //傳入state對象 state.count++ } }
如果要實現統計點擊次數，就是當每次點擊的時候調用mutation中的addCount方法。通過"this.$store.commit("addCount")"可以調用addCount方法實現count的增加，如下
<template>
<div>
<button @click="addCount()">點擊總數是：{{count}}</button>
</div>
</template>
<script>
import {mapState} from 'vuex';
export default {
//映射count,this.count就是this.$store.state.count,相當於把state中的count變為組件的變量
computed: mapState(["count"]),
methods: {
addCount() {
this.$store.commit("addCount")
}
}
}
</script>
同樣的，通過mapMutation來映射也可以使用addCount方法
methods: { ...mapMutations(["addCount"]) //映射addCount方法,this.addCount就等於this.$store.commit("addCount") }
（3）getters
getters可以理解為store中的計算屬性，對state中的變量在輸出前進行處理。例如：需要實現再點擊三下按鈕之后一共點擊了多少下次數顯示的功能，就可以在getters,js添加以下代碼
export default { getCountAfter3(state) { //傳入state對象 let result = state.count+3 return result } }
然后在page1中，通過"this.$store.getters.getCountAfter3"調用getCountAfter3方法顯示，可以實現上述效果
<button>繼續點擊三次后次數將會變為{{getCountAfter3}}</button>
同樣的，通過映射也可以使用getters中的方法
computed: { ...mapState(["count"]), //映射count,this.count就是this.$store.state.count,相當於把state中的count變為組件的變量 ...mapGetters(["getCountAfter3"]), //映射getCountAfter3 },
（4）actions
通過action也可以實現count的增加。當然，action也是通過調用mutation來實現count增加的。兩者的主要區別是actions可以實現異步操作。在actions.js添加
export default { addCountAction({commit}) { commit('addCount') } }
然后在page1中可以通過"this.$store.dispatch('addCountAction')"來調用addCountAction方法實現count++（與Mutations類似）
同樣的，也可以通過映射來使用addCountAction方法
methods: { ...mapMutations(["addCount"]), //映射addCount方法,this.addCount就等於this.$store.commit("addCount") ...mapActions(["addCountAction"]) //映射addCountAction方法 }
因為篇幅限制，page2就不再詳細講述，page2頁面其實可以直接復制page1，再在兩個界面添加跳轉按鈕即可，實現效果如下：
下載具體代碼：https://files.cnblogs.com/files/lxbxyz/src.zip
參考教程：