发表于： 2020-02-01 23:57:55
1 1502
今天完成的事情：
利用vuex重构了页面，vuex的优点在于：建立一个state值可以在所有的组件中访问到，这样就省去了父子组件通信这一繁琐的步骤：
const store = new Vuex.Store({
state: {
pagination: '',//用来记录按钮个数
beclickBtn: 0,//记录被点击的按钮的index
articleListValue: '',
vxType: '',
vxStatus: '',
},
mutations: {
VxToFirstPage(state) {
state.beclickBtn = 0
},
VxToLastPage(state) {
state.beclickBtn = state.pagination - 1
},
VxPageBtn(state,index) {
state.beclickBtn = index
},
VxBack(state) {
if(state.beclickBtn > 0) {
state.beclickBtn--
}
},
VxNext(state) {
if(state.beclickBtn < (state.pagination - 1)) {
state.beclickBtn++
}
},
turnPage(state) {
axios.get('api/a/article/search/',{
params: {
page: state.beclickBtn + 1,
type: state.vxStatus,
status: state.vxType,
}
})
.then(res => {
state.articleListValue = res.data.data.articleList
state.pagination = Math.ceil(res.data.data.total / res.data.data.size)//向上舍入
})
},
turnTypeAndStatus(state , val) {
state.vxType = val[0]
state.vxStatus = val[1]
}
},
actions: {
vxSearch(context , val) {
context.commit('turnTypeAndStatus' , val)
context.commit('turnPage')
}
},
})
重构页面完成点击分页符切换指定的页面，同时利用vuex完成了根据条件搜索内容的功能
明天要做的事情：
完善功能根据时间搜索，还有点击输入指定的页面跳转？
官网页面可以保存状态，即使刷新也可以保存状态，考虑尝试一下keepalive
返回列表
评论