寫在前面:
我是一個堅持學習的技術小白,在博客裏分享自己的學習總結記錄,如果你也在努力變成更好的自己,可以關注我,一起加油!
如果任何問題或交友,歡迎各位與我聯繫:[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 工具很強大,更深層次的使用筆者還需探索,感謝閱讀。
最後
以上爲本人的一點學習記錄與總結,如有錯誤,請指出,不勝感激。