vue中关于接口依赖上一个值的变化，作出相应的请求优化

Question

需要如图，不知道有没有描述清楚
现在实现的功能是用了watch深度监听，因为这个搜索方法在其他页面也有用到，所以封装在了mixins中，原理就是通过watch去监听值的变化，但是有个问题就是loading写在了全局方法axios拦截中，前面值变化的话这就有两次http请求，loading就闪两次看着有点别扭，不知道优化方案

1.能不能通过vuex，页面一进来就去this.store.actions('getList'),我试了下这样写法
const actions = {
getGradeList ({commit}) {

this.$request(this.$api.home_list).then(res => {
  console.log('res111', res)
}).catch(err => {
  console.log('err', err)
})
commit()

},
}
会报错home_list未定义，这里面的this用Vue实例引进来的也是报错，又挂了、在actions去请求后台接口，要注意哪些？？
2.像这种有下拉框有依赖前面的值，比较好的做法推荐下，（封装成组件会不会通用些）

Answer 1

不太明白楼主会出现 前面值变化的话这就有两次http请求，按照个人理解就是，页面一开始加载的时候，去请求年级的接口，不要设置 watch 的 immediate 为 true。可以放到 created 方法里。

Answer 2

axios拦截器中记录每个请求的列表，请求完成后清空，当请求相同，把上一个取消或者返回上一个的promise。