寫在前面：
我是一個堅持學習的技術小白，在博客裏分享自己的學習總結記錄，如果你也在努力變成更好的自己，可以關注我，一起加油！
如果任何問題或交友，歡迎各位與我聯繫：[email protected]
相信很多人都存在這樣的情況， 在項目中vuex 會用，但讓你回答 vuex 是什麼？只能答出個大概，模模糊糊的概念。（不是我，真不是！）這篇文章將具體講解什麼是 vuex 以及如何以正確姿勢打開 vuex？
vuex 是什麼？
Vuex是Vue.js應用程序的狀態管理模式+庫。 它充當應用程序中所有組件的集中存儲，其規則確保狀態只能以可預測的方式進行更改。 它還與Vue的官方devtools擴展集成，以提供高級功能，例如零配置時間旅行調試和狀態快照導出/導入。
看完官網的概念是不是似懂非懂？我們通過一個小例子先來了解 vue.js 程序 頁面結構。
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
vue.js 由三部分組成： view、actions、state , 而 vuex 是Vue.js應用程序的狀態管理模式+庫。狀態管理模式就是對 vue.js 的 state 進行管理的工具。而庫是 vuex 工具給我們提供了一塊區域存放 這些狀態。更通俗的解釋可以講解爲，vue 就是一個生產車間，而 vuex 可以當做帶有倉庫管理員的倉庫，車間生產出來放到倉庫存儲，並由管理員負責管理倉庫。
爲什麼要使用 vuex ？
大概瞭解了 vuex 是做什麼的了？有些同學可能提問了，vue.js 程序的頁面中不是可以存放 state 嗎？幹嘛需要 vuex 來管理 state ？
問的好！學習一個新東西就是要從 what , how ,when ,why 等幾個方面去引發思考。上面的小例子，展示的是單個頁面，如果我的程序只是單頁面這種小型程序，各個組件中不需要依賴同一狀態，duck不必使用 vuex 來管理我們的 state 。但如果當你打算開發大型單頁應用（SPA），會出現多個視圖組件依賴同一個狀態，來自不同視圖的行爲需要變更同一個狀態。你就應該考慮使用Vuex了，它能把組件的共享狀態抽取出來，當做一個全局單例模式進行管理。這樣不管你在何處改變狀態，都會通知使用該狀態的組件做出相應修改。
下面，我們來說明 vuex 如何使用？
vuex 安裝 ？
- 在構建好Vue.js項目後，並安裝了 Vue-CLI 後
- 終端輸入：npm install vuex --save
- 在項目src目錄下新建 store.js 文件，與 main.js 同級
vuex 如何使用 ？
先來看看 store.js 文件內容都有什麼？
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{},
mutations:{},
getters:{},
actions:{},
modules:{}
})
Vuex 核心概念主要有以下幾部分：
- state
- mutations
- getters
- actions
- modules
state
vuex 使用單個狀態樹，也就是一個應用程序中只需要一個 vuex 的實例即可管理你的所有狀態。使用時，store.js 中的 state 對象中存放的都是你應用程序中的全局變量。使用起來也是非常容易，假設我們現在把組件中的狀態抽離出來。
vuex(state) == vue(data)
state: {
token: "", //用戶token
lists:[],
message:"給各個組件的消息！"
}
當各個組件想要使用這些狀態時，如何調用呢？
//組件A
import { mapState } from "vuex"; // 引入vuex用於將全局變量映射爲頁面變量
computed:{
...mapState([ //解構到計算屬性中
'message' //store.js 中的state
])
},
mutations
官網解釋：實際更改Vuex存儲中狀態的唯一方法是提交一個突變。 Vuex突變與事件非常相似：每個突變都有一個字符串類型和一個處理程序。 處理函數是我們執行實際狀態修改的地方，它將接收狀態作爲第一個參數。
mutations 也就是用來更改 store 的 state 的，相當於： vuex(mutations) == vue(methods)，看看是如何使用的？
試想，我們需要在某一個組件中給 state 中的 list 數組添加數據。組件中是如何實現的呢？
//組件A
this.$store.commit("addList", this.data); // 存儲 data 到 store 中
store 中如何接收組件A傳遞的數據呢？正如官網所說的，每個突變的第一個參數都是 state ，第二個參數爲 組件A傳遞的數據。
// store.js 中負責接收組件A 的數據，並push 到 state 中的 list數組
mutations:{
addList(state, listData) {
state.lists.push(listData);
},
}
getters
試想某個組件中需要獲取通過一定條件過濾後的 list ，這時候，我們可以使用 getters 來獲取。 vuex(getters) 與 vue(computed) 相似， getters 也是將結果存入緩存，當數據變化後，再次調用。每一個 getters 都將 state 做爲其第一個參數。
// store.js
getters: {
getList: state => {
return state.lists.filter(list => list.length > 5)
}
}
在組件中如何獲取呢？
//組件A
import { mapGetters } from "vuex"; // 引入vuex用於將全局變量映射爲頁面變量
computed: {
...mapGetters([
'getList'
])
}
actions
actions 與 mutations 很相似，但不同之處在於：
- mutations 用來改變狀態，actions 用來提交 mutations
- mutations 只支持同步操作，actions 可以包含 異步操作
試想我們需要某個組件在一段時間後執行某個操作。這時候，actions 支持異步，只能使用 actions
//store.js
//2s後向lists 數組添加數據
actions: {
add({ commit, state }, listData) {
setTimeout(function () {
//調用 mutations 的 addList 方法
commit("addList", listData);
}, 2000);
}
},
在組件中如何觸發此actonis？
//組件A
methods: {
add(){
//使用 dispatch 觸發 actions
this.$store.dispatch('add');
},
}
modules
當代碼量不斷增多，這個容器的狀態和Mutations，actions，getters都太多了時，我們可以把它們按自己的需求進行分類，分成幾個module，每個module和上面一樣由state，mutations，actions，getters組成：
//store.js
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
總結：
- 對於vuex這個容器，它的代碼結構也十分重要，它決定了你是否能高效管理狀態。
- vuex 工具很強大，更深層次的使用筆者還需探索，感謝閱讀。
最後
以上爲本人的一點學習記錄與總結，如有錯誤，請指出，不勝感激。