vuex的學習與使用

vue中有父子元件之間的通訊，但某些變數需要在全域性使用，那就用到了vuex，vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。

建立乙個vue3專案，具體如下vue-cli3的建立

記得在選配置的時候選上vuex

專案建立成功後，得到的專案目錄如下

其中的store.js就是用來設定vuex的，檢視store.js

import vue from
'vue'
import vuex from
'vuex'
vue.
use(vuex)
export
default
newvuex.store(,
mutations:
, actions:
})

比如我想共享的狀態有：開始時間，結束時間，時間型別，部門選擇，型別，更改如下

import vue from
'vue'
import vuex from
'vuex'
vue.
use(vuex)
export
default
newvuex.store(,
type:1}
, mutations:
, setendtime:
function
(state, n)
, setdepartselected:
function
(state, n)
, settimetype:
function
(state, n)
, settype:
function
(state, n)},
actions:
})

為了了解store，可以在頁面的mounted中它列印出來，console.log(this.$store)，結果如下

可以看到最後的state裡面是變數，如果想獲取

在js中

computed:
}

在template中使用去掉this即可

更改要用到在mutations定義的方法，比如想更改timetype

this
.$store.
commit
('settimetype'
,'monthly'
)

有時候我們需要從 store 中的 state 中派生出一些狀態，為了避免在其他元件**中重複寫，在store.js裡的getter寫即可，比如我想把state裡的開始時間和結束時間拼接起來

vuex 允許我們在 store 中定義「getter」（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算

在store.js中新增

getters:
}

在頁面mounted裡列印出來

mounted ()

得到結果

getter就類似於元件裡的computed，避免重新計算，有快取，只要以來不變就不會重新計算

mapgetters 輔助函式僅僅是將 store 中的getter對映到區域性計算屬性：

import
from
'vuex'
export
default
,mounted()
, computed:
}

就可以直接使用了

用處和mapgetters類似，不過對映的是status裡的內容，可以在頁面中如下使用, store裡的值就可以直接用了，不需要computed了

import from 'vuex' export default , computed:

}

action 函式接受乙個與 store 例項具有相同方法和屬性的 context 物件，因此你可以呼叫 context.commit 提交乙個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

比如在store裡加action，用來給starttime和endtime自增一天

actions:
},

在頁面中使用

mounted()
,

結果如下

mutation 必須同步執行，action 就不受約束，可以在 action 內部執行非同步操作

比如可以在action裡寫從後台獲取資料的操作，或者定時器操作，以定時器操作為例（在專案中用的比較多的還是axios操作）

在store.js的action裡增加

actions:
,incrementtimeasync
(context)
,5000)}
},

在頁面中寫

"pug"
>
div.home
div.test-part 
}<
/template>
// @ is an alias to /src
import
from
'vuex'
export
default
, computed:
}<
/script>

Vuex學習與使用

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可的方式發生變化這是vuex的官網，對vuex的解釋，乍一看挺難理解的，什麼叫狀態管理模式？什麼又是集中式儲存管理？官網的描述不明覺厲。首先我們就先來解釋這個定義...

vuex的使用與部署

由於store會隨著專案大起來的話，再寫在同乙個js裡面的話，維護起來會非常困難，至少，會很頭疼。所以可以考慮這樣部署到src資料夾新建乙個store資料夾，新建乙個index.js 模組名根據你的需要起 const index mutations communitie state,res exp...

vuex與redux的使用

state 儲存資料 mutations 修改state資料的同步方法 actions 非同步方法，請求之類的 modules 掛載別的倉庫 vue例項中使用this.store.xx來使用資料，呼叫action中的方法需要 this.store.dispatch 方法名進行分發，需要呼叫muta...

vuex的學習與使用

Vuex學習與使用

vuex的使用與部署

vuex與redux的使用

相關推薦