发表于： 2019-11-08 23:37:27
1 1080
今天完成的事情：
今天学习使用了vuex，在其中根据业务逻辑来分模块，例如分别有搜索模块，搜索结果模块，视频详情模块，等等，其中搜索模块内的vuex写了一个接口：
// 搜索
import axios from 'axios'
const serach = {
namespaced: true, //这里使用了命名空间
state: {
study: {
title: '',
type: null,
grade: null,
status: 1,
}
//这里面的state结构就与你device中vue组件的结构进行对应
// search: {
// //一般会将组件需要存放的数据分成这三类进行分别存放,当然你也可以根据自己的需求,自行配置或者不要
// output: {
// //暴露出来的公共数据
// },
// update: {
// //是否更新组件的数据
// },
// cache: {
// //组件缓存数据
// }
// },
},
//Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样
//getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
getters: {
},
//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，此时里面的必须是同步函数
mutations: {
changeTitle(state, data) {
state.study.title = data;
},
changeType(state, data) {
state.study.type = data;
},
changeGrade(state, data) {
state.study.grade = data;
},
},
//Action 提交的是 mutation，而不是直接变更状态。并且Action 可以包含任意异步操作。
actions: {
//context是state的父级
onlySearch(context) {
axios({
method: 'get',
url: '/a/list/study',
data: {
title: context.state.study.title,
type: context.state.study.type,
grade: context.state.study.grade,
status: context.state.study.status,
}
}).then(res => {
window.console.log(res);
}).catch(err => {
window.console.log(err);
})
}
}
};
export default serach;
明天计划：
明天看看怎么使用这个，在搜索页面进行传参，然后通过此处的onlySearch方法来请求数据。
返回列表
评论