1.0Vuex的三板斧，使用vuex管理不同页面数据

封装vuex模块，导入axios，拿值

import { getList, getBanner, getFloor } from '@/API/getDate.js'
// 这是home模块
const state = {
  cateType: [],//这是三级联动的数据
}
const mutations = {
  receiveCateType(state, cateType) {
    state.cateType = cateType
  },
}
const actions = {
  // 请求三级列表
  async reqCateType({commit}) {
    const { data: res } = await getList()
    if(res.code === 200){
      commit('receiveCateType',res.data)
    }
  },
}
const getters = {}
export default {
  state,
  mutations,
  actions,
  getters

}

挂载在store，导出

import Vue from 'vue'
import Vuex from 'vuex'
import home from './home/index.js'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    home,
  }
})

在指定模块拿值

import { mapState } from "vuex"; 

//如果要拿值，这个值直接就是 bannerList

methods: {
  getList() {
    this.$store.dispatch("getlist");
  },
},
computed: {
  ...mapState({ bannerList: state => state.home.bannerList }),
},
mounted() {
  this.getList();
},