背景

登录系统之后，需要初始化一些全局数据，然后存到store里，在需要使用的时候直接从store里面获取即可

初始化数据的时机

登录成功进入系统，在layout组件中调用接口获取数据（layout组件是系统界面的基本布局，组件层级是： App -> Layout -> Pages，登录系统之后，所有的页面组件都是在其下的）

在layout组件的 beforeCreate生命周期中调用接口，具体代码如下

  1. <template>
  2.   <div class="Main">
  3.     <router-view></router-view>
  4.   </div>
  5. </template>
  7. <script>
  8. import { mapActions } from "vuex";
  9. export default {
  10.   name: 'Main',
  11.   props: {},
  12.   components: {},
  13.   data() {
  14.     return {}
  15.   },
  16.   computed: {},
  17.   watch: {},
  18.   // INIT STORE
  19.   async beforeCreate() {
  20.     // 获取所有产品分类
  21.     await this.$store.dispatch('product/getAllCatagory');
  23.     // ⚠ mapActions执行在beforeCreated之后，
  24.     // 在beforeCreated里不能直接调用通过mapActions映射的函数，必须写dispatch
  25.     // await this.initStore()
  26.   },
  27.   created() { },
  28.   mounted() { },
  29.   methods: {
  30.     ...mapActions('product', ['getAllCatagory']),
  31.     async initStore() {
  32.       await this.getAllCatagory()
  33.     }
  34.   },
  35.   updated() { },
  36.   beforeDestroy() { }
  37. }
  38. </script>
  40. <style lang='less' rel='stylesheet/less' scoped>
  41. .Main {
  42.   position: absolute;
  43.   width: 100%;
  44.   height: 100%;
  45.   overflow-y: auto;
  46. }
  47. </style>

注意

  • mapActions执行在beforeCreated之后
  • 在beforeCreated里不能直接调用通过mapActions映射的函数，必须写dispatch
  • 子组件里的接口调用并不会因为layout组件里写了 async await就在其后执行，倘若子组件需要用到store里面的数据，可以在子组件里面增加computed处理