一、Vuex 是什么?
官網:Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。
關鍵詞:狀態管理器
二、為什么我們要用呢?
官網:
當我們的應用遇到多個組件共享狀態時,單向數據流的簡潔性很容易被破壞:
- 多個視圖依賴於同一狀態。
- 來自不同視圖的行為需要變更同一狀態。
對於問題一,傳參的方法對於多層嵌套的組件將會非常繁瑣,並且對於兄弟組件間的狀態傳遞無能為力。
對於問題二,我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。
以上的這些模式非常脆弱,通常會導致無法維護的代碼。
因此,我們為什么不把組件的共享狀態抽取出來,以一個全局單例模式管理呢?在這種模式下,我們的組件樹構成了一個巨大的“視圖”,不管在樹的哪個位置,任何組件都能獲取狀態或者觸發行為!
通過定義和隔離狀態管理中的各種概念並通過強制規則維持視圖和狀態間的獨立性,我們的代碼將會變得更結構化且易維護。
關鍵詞:多個組件共同用一個變量的時候,靠組件傳參太復雜,是的,一個變量,進行父傳子、子傳孫、子子孫孫無窮盡,想想都不行啊兄弟萌,不要想為啥用了
三、怎么用?
在此了解五個屬性:State\Mutation\Action\Getter\Module
官網:每一個 Vuex 應用的核心就是 store(倉庫)。“store”基本上就是一個容器,它包含着你的應用中大部分的狀態 (state)。Vuex 和單純的全局對象有以下兩點不同:
-
Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那么相應的組件也會相應地得到高效更新。
-
你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化,從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。
看不懂的還是聽我給你講:我們可以直接在main.js中創建一個store,
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
接下來為了在 Vue 組件中訪問 this.$store property,需要為 Vue 實例提供創建好的 store。Vuex 提供了一個從根組件向所有子組件,以 store 選項的方式“注入”該 store 的機制
new Vue({
el: '#app',
store
})
現在我們可以從組件的方法提交一個變更:
methods: {
increment() {
this.$store.commit('increment')
console.log(this.$store.state.count)
}
}
以上就是我們通過vuex來創建state變量、通過mutation來修改變量的過程,具體為什么這么做:
網上有很多解釋的文檔,這里直接復制過來
1. state:vuex的基本數據,用來存儲變量
2. geeter:從基本數據(state)派生的數據,相當於state的計算屬性
3. mutation:提交更新數據的方法,必須是同步的(如果需要異步使用action)。每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。
回調函數就是我們實際進行狀態更改的地方,並且它會接受 state 作為第一個參數,提交載荷作為第二個參數。
4. action:和mutation的功能大致相同,不同之處在於 ==》1. Action 提交的是 mutation,而不是直接變更狀態。 2. Action 可以包含任意異步操作。
5. modules:模塊化vuex,可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰,方便管理
簡單來說,state用來定義變量、mutation修改變量
備注:其實vuex如果你僅僅是用state的時候,你會發現,此時相當於在全局定義了一個變量,因此我們其實是可以直接賦值進行修改的
this.$store.state.bianliang = xinbianliang
但是為什么要用mutation呢,這是因為在嚴格語法下,如果直接修改state里面的值,會給我們報錯的,因此用mutation修改
action上面的用法說了,可以操作異步,,,getter類似於vue的compute屬性,進行視圖渲染,初學者可能一般不用,module是定義多個模塊,方便大項目引入,
因此,初學者其實僅僅掌握、store\mutation的用法后,可以簡單的說自己掌握了狀態管理器
我覺得如果想徹底了解vuex的用法,我們不單單要光看文檔,還需要不斷的用鍵盤進行敲擊,記住語法、作用等,這樣才能加深理解
