状态管理显示和隐藏
const commonFn={
// 显示和隐藏
// dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)
// commit:同步操作,写法:this.$store.commit('mutations方法名',值)
closeClobalLoading(){
setTimeout(()=>{
store.dispatch('showLoading',false)
},0)
},
openGlobalLoading(){
setTimeout(()=>{
store.dispatch('showLoading',true)
},0)
},
vuex状态管理
// main.js引入store全局注入
import Vue from 'vue';
import Vuex from 'vuex';
import collection from './modules/collection'
import footerStatus from './modules/footerStatus'
Vue.use(Vuex);
const store = new Vuex.Store({
modules:{
collection,
footerStatus
},
state:{ //要设置的全局访问的state对象
// 设置初始属性值
count:1,
showLoading:false
},
getters:{ //实时监听state值的变化(最新状态)
// 方法名随意
getcount:state=>{
return state.count+1
}
},
mutations:{//唯一允许更改state
showLoading(state, status) {
state.showLoading = status
},
add(state,n){
state.count=state.count+n
},
remove(state){
state.count=state.count-1
}
},
actions:{//触发更改
showLoading ({ commit }, status) {
commit('showLoading', status)
},
addFun(context,n){
context.commit("add",n)
},
removeFun(context){
context.commit("remove")
}
}
});
export default store;
页面显示
methods: {
// 点击显示
showsure(){
_g.openGlobalLoading()
},
// 点击影藏
showfalse(){
_g.closeClobalLoading()
},
}