Vuex基本使用

2022-06-26 22:00:23 字數 822 閱讀 4621

vuex,它包括了state,getters,mutations,actions,module,還有語法糖mapstate,mapgetters,mapactions.

state:vuex中的資料來源,我們需要儲存的資料就儲存在這裡,可以通過this.$store.state來獲取資料。

getters:相當於vue中的計算屬性computed,getters的返回值會根據他的依賴被快取起來,只有當依賴值發生變化時才會被重新計算。getters可以用於監聽state中的值的變化,返回計算後的屬性。

mutations:唯一修改state中值的方法,不過他是同步執行的。

actions:可以通過提交mutations中的方法來執行相關操作,他提交的是mutation,而不是直接改變狀態。非同步操作。他有幾種提交方式:

actions: )

}    

分發action

通過store.dispatch方法觸發:store.dispatch('increment'),繞過mutations呼叫方法主要是因為需要非同步操作。

荷載方式:store.dispatch('increment', )

物件方式:store.dispatch()

module:主要是為了簡化store物件,將store分成多個模組,每個模組都有自己的state,modules,actions,getters.

mapstate,mapgetters,mapactions:對應的語法糖,如果不想使用this.$store.state之類的寫法,可以通過在對應的元件中import來引入他們三個,這時候就可以直接使用state,或者在mapgetters呼叫getters裡的方法

vuex基本使用

使用vuex 1.安裝vuex,搭建手腳架 npm i vuex s2.建立乙個store資料夾,在該資料夾中建立乙個index.js檔案 2.1引入相應的檔案 import vue from vue import vuex from vuex 2.2使用vuex vue.use vuex 3.建立...

vuex基本使用

1.首先要在store index.js檔案配置vuex vuex基本有state 用來定義共享狀態,actions 實現非同步請求操作,mutations 存放了所有更改狀態的方法,getters 類似於計算屬性,根據vuex的state狀態派發乙個新的狀態出來.自己封裝的ajax請求 vue.u...

學會VueX基本使用

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。可以理解為乙個臨時的可共用的乙個物件 我們可以在所有的元件訪問它。我們可以把他理解為乙個倉庫,他裡面儲存著一些工具,而元件是工人,在工人需要倉庫裡的工具的時候,就需要通過一系列的規範操作去獲取它。一般適用於中大型的單頁面應用,如果需要多...