vuex及其屬性應用

2022-07-23 06:12:11 字數 981 閱讀 1748

vuex 是什麼?

vuex 是乙個專為 vue.js 應用程式開發的狀態管理構架。它採用統一式儲存管理和維護所有元件的可變化的狀態。

也可以理解為是一種開發模式或框架,通過狀態集中管理驅動元件的變化,應用級的狀態集中放在store中,改變狀態的方式是提交mutations,非同步邏輯封裝在action中

什麼是狀態管理模式?

狀態管理包括三個部分:

1. state

驅動應用的資料來源。

2. view

以宣告的方式將state對映到檢視上。

3. action

響應在view上,使用者號輸入導致的狀態變化(主要用於操作非同步)。

vuex的五個屬性

state, getters, mutations, actions, modules。

state:

vuex的基本資料,用來儲存變數。

geeter:

從基本資料(state)派生的資料,相當於store的計算屬性;getter 的返回值會根據它的依賴被快取起來,且只有當它的依賴值發生了改變才會被重新計算。

mutation:

提交更新資料的方法,必須是同步的(如果需要非同步使用action)。每個 mutation 都有乙個字串的 事件型別 (type) 和 乙個 **函式 (handler)。

**函式就是我們實際進行狀態更改的地方,並且它會接受 state 作為第乙個引數,提交載荷作為第二個引數。

action:

和mutation的功能大致相同,不同之處在於:

① action 提交的是 mutation,而不是直接變更狀態;

② action 可以包含任意非同步操作。

modules:

模組化vuex,可以讓每乙個模組擁有自己的state、mutation、action、getters,使得結構非常清晰,管理更為方便。

flex布局的屬性及其應用

flex布局也叫彈性布局作為前端開發中最常用布局之一,它都有那些屬性,有哪些特點,讓我們來了解一下。1.操作方便,布局簡單,移動端使用比較廣泛 2.pc端支援情況較差 3.ie低版本不支援flex 以前要想把li標籤在一行顯示時,要給li加浮動,新增浮動後可能會對下面的內容產生影響 很麻煩 當我們學...

Vuex 核心屬性 下

modules 可以定義新的模組 官方上說,當我們的應用變的非常複雜時,store物件就有可能變得相當臃腫 為了解決這個問題,vuex允許我們將store分割成模組 module 在這裡,每個模組都擁有自己的state mutations actions getters等 寫個例子吧 首先我們來宣告...

Vuex 核心屬性 中

mutation同步函式 在mutations 中 使用非同步操作的話,頁面上devtools工具無法跟蹤資訊。所以在mutations中的方法必須是同步方法 action的基本定義 我們強調,不要再mutation中進行非同步操作,但再某些情況下,我們確實希望再vuex中使用非同步操作 網路請求等...