vuex 存储订单类型的字段，如何让他在没有数据的时候再去请求接口？

作者站长头像
站长
· 阅读数 25
const state = {
  types: [],
}
export default {
  state,
  mutations
}

A页面B页面C页面都会用到订单类型 store.getters.types ,但我并不想这三个页面都写接口请求数据。怎么把接口请求放在vuex中管理。比如store.getters.types调用的时候有数据，就返回数据。没有就接口请求到数据？

回复
1个回答
avatar
test
2024-06-21

const orderMixin = {
    computed: {
        types() {
            return this.$store.state.types;
        }
    },
    created() {
        this.$store.dispatch('updateTypes');
    }
}

const store = new Vuex.Store({
  state: {
    types: []
  },
  actions: {
    updateTypes (ctx) {
        if(!ctx.state.types.length) {
            // fetch
        }
    }
  }
})

export default {
    name: 'A',
    mixins: [orderMixin],
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容