vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。
初始化store/index.js
將store掛載到當前專案的vue例項(import vue from
'vue'
import vuex from
'vuex'
vue.
use(vuex)
const store =
newvuex.store(}
)export
default store
main.js
)當中去
1.import vue from
'vue'
import router from
'./router'
import store from
'./store'
vue.config.productiontip =
false
newvue
()
state
存放狀態
2.mutations
:操作state資料的方法的集合,比如對該資料的修改、增加、刪除等等。
mutations
方法都有預設的形參:([state
] [,payload
])
state
是當前vuex物件中的state
payload
是該方法在被呼叫時傳遞引數使用的
3.this
.$store.
commit
('edit',15
)
getters
:可以對state中的成員加工後傳遞給外界
getters
中的方法有兩個預設引數
state
當前vuex物件中的狀態物件
getters
當前getters物件,用於將getters下的其他getter拿來用
4.this
.$store.getters.methodname
actions
非同步操作:由於直接在mutation方法中進行非同步操作,將會引起資料失效。所以提供了actions來專門進行非同步操作,最終提交mutation方法。
actions
中的方法有兩個預設引數
context
上下文(相當於箭頭函式中的this)物件
payload
掛載引數
5.this
.$store.
dispatch
('methodname'
,)
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...