小謝第50問 vuex的五個屬性 使用 介紹

2022-03-07 02:54:47 字數 2246 閱讀 7533

一、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(,

mutations:

}})

接下來為了在 vue 元件中訪問this.$storeproperty,需要為 vue 例項提供建立好的 store。vuex 提供了乙個從根元件向所有子元件,以store選項的方式「注入」該 store 的機制

new vue()

現在我們可以從元件的方法提交乙個變更:

methods: 

}

以上就是我們通過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的用法,我們不單單要光看文件,還需要不斷的用鍵盤進行敲擊,記住語法、作用等,這樣才能加深理解

小謝第46問 js事件機制

當我們開啟 時,網頁的渲染過程就是一大堆同步任務,比如頁面骨架和頁面元素的渲染。而像載入 之類占用資源大耗時久的任務,就是非同步任務。我們用導圖來說明 那主線程執行棧何時為空呢?js引擎存在monitoring process程序,會持續不斷的檢查主線程執行棧是否為空,一旦為空,就會去event q...

小謝第22問 for迴圈中的非同步事件

如果在for迴圈中寫乙個函式,然後等待for迴圈中的函式結束後再進行下一步函式請求,再js中,我們顯然要進行同步處理,可以用async await進行處理,如下方 場景 因為要for 迴圈後才執行this.gettable這個函式,因此用await將api函式變為同步,等待for迴圈執行結束後再執行...

Vuex 白話教程第五講 Vuex 的小幫手

先說兩句 前面已經講完了 vuex 下的 state getter mutation 及 action 這四駕馬車,不知道大家是否已經理解。當然,要想真正熟練掌握的話,還是需要不斷的練習和動手實踐才行。其實只要把這四駕馬車完全熟練駕馭了,那麼應對一些中小型的專案,基本上就已經沒啥問題了,後面的 mo...