開發(fā)工具
image.png
一看就懂
image.png
image.png
image.png
dispatch和commit的使用
dispatch 異步操作 this.$store.dispatch('actions的方法'，arg)
commit 同步操作 this.$store.commit('mutations的方法'遮糖，arg)
this.$store.dispatch('Login', user)
commit('SET_TOKEN', res.token)
store容器中有：
- State:{x:1,y:2,z:3}
- Getters-------------------------- 加工state成員給外界
- Mutaions:{SET_TOKEN:(state, token){}}
- Actions:{ Login(){}}
- Modulues
this.$store.state.name
image.png
States
const state = {
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
withoutAnimation: false
},
device: 'desktop',
size: Cookies.get('size') || 'small'
}
Mutations
const mutations = {
CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
},
TOGGLE_DEVICE: (state, device) => {
state.device = device
},
}
Actions
const actions = {
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
closeSideBar({ commit }, { withoutAnimation }) {
commit('CLOSE_SIDEBAR', withoutAnimation)
},
toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device)
}
}
Getters
可以對state中的成員加工后傳遞給外界
Getters中的方法有兩個默認(rèn)參數(shù)：
state 當(dāng)前VueX對象中的狀態(tài)對象
getters 當(dāng)前getters對象裂问，用于將getters下的其他getter拿來用
真實項目中的Getters
image.png
Modulues
image.png
image.png
