vuex 狀態管理模式

2021-10-09 21:15:07 字數 1588 閱讀 3551

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。

初始化store/index.js

import vue from


'vue'


import vuex from


'vuex'


vue.


use(vuex)


const store =


newvuex.store(}


)export


default store
將store掛載到當前專案的vue例項(main.js)當中去

import vue from


'vue'


import router from


'./router'


import store from


'./store'


vue.config.productiontip =


false


newvue


()
1.state存放狀態

2.mutations：操作state資料的方法的集合，比如對該資料的修改、增加、刪除等等。

mutations方法都有預設的形參：([state] [,payload])

state是當前vuex物件中的state

payload是該方法在被呼叫時傳遞引數使用的

this


.$store.


commit


('edit',15


)
3.getters：可以對state中的成員加工後傳遞給外界

getters中的方法有兩個預設引數

state當前vuex物件中的狀態物件

getters當前getters物件，用於將getters下的其他getter拿來用

this


.$store.getters.methodname
4.actions非同步操作：由於直接在mutation方法中進行非同步操作，將會引起資料失效。所以提供了actions來專門進行非同步操作，最終提交mutation方法。

actions中的方法有兩個預設引數

context上下文(相當於箭頭函式中的this)物件

payload掛載引數

this


.$store.


dispatch


('methodname'


,)
5.modules：當狀態非常多時，可以採用模組化管理模式。vuex 允許我們將 store 分割成module。每個模組擁有自己的 state、mutation、action、getter。

Vuex狀態管理模式

官方文件 vuex實現共享狀態管理，實際就是管理裡面的state的相應值 import vue from vue import vuex from vuex vue.use vuex export default newvuex.store mutations getters actions mod...

Vuex介紹（狀態管理模式）

常用除錯 console.log,alert 阻塞的行為,debugger斷點除錯 多個檢視依賴同乙個狀態 eg 選單導航 來自不同檢視的行為需要變更同一狀態 store.js import vue from vue import vuex from vuex vue.use vuex export...

Vue之Vuex 狀態管理模式

簡介 vuex 狀態管理模式 是vue.js應用程式開發的狀態管理模式，它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可 的方式發生變化。作用 解決不同元件之間的資料共享 解決元件的資料儲存問題 實現 首先，在store.js例項化乙個vuex，用來對資料進行儲存 impor...