vuex的使用

Posted 2020-10-17 追风少年

定义需要用到的全局的数据

const app = {
state: {
isLoading: false,
isHomeHeader: false,
keywords: ‘‘,
},
mutations: {
UPDATE_LOADING(state, status) {
state.isLoading = status
},
UPDATE_HEADER(state, status) {
state.isHomeHeader = status
},
UPDATE_KEYWORDS(state, words) {
state.keywords = words
}
},
actions: {
updateLoading({ commit }, status) {
commit(‘UPDATE_LOADING‘, status)
},
updateHeader({ commit }, status) {
commit(‘UPDATE_HEADER‘, status)
},
updateKeywords({ commit }, words) {
commit(‘UPDATE_KEYWORDS‘, words)
}
}
}

export default app

 

对全局状态进行统一管理

const getters = {
isLoading: state => state.app.isLoading,
isHomeHeader: state => state.app.isHomeHeader,
keywords: state => state.app.keywords,
}

export default getters

 

在页面中使用，对状态进行改变

store.dispatch(‘updateHeader‘, true)

this.store.dispatch(‘updateHeader‘, true)

在页面中获取状态

const keywords = this.$store.getters.keywords