this.$store.state.xx.xx 其实是Vue用到状态管理工具Vuex
Vuex官网:https://vuex.vuejs.org/zh/
感觉就是把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!(在项目的任意地方都可以随时获取和动态的修改,在修改之后,vue会为你的整个项目做更新)
获取store中的数据
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/77d7513792639c6b40b32f57f4aca7da.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/68e248e661f53fa6c089970a6c5d8335.png)
在vue根文件中注册store,这样所有的组件都可以使用store中的数据了
我的项目文件结构:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/efa631b2b07ac79902af2c4f7e536357.png)
在main.js文件中注册store
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3d94be1dc2cafe65d90268627308865d.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/67c960c4409afeb99ca1c7d4f019995b.png)
然后代码中写到
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e988ef9ccf0256291db2ba0c023f2e0c.png)
登录后前端有缓存userId,然后通过userId再去查找
这个位子就用到了 公共页面里面的
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2f8e989a2f7e3696940c34f0b0b911a2.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7d088ad3c69bcaf61616b378a53b7fb5.png)
总结:main.js是工会老大,你把奖励给了老大,老大有的道具会交给你使用,那么你就可以通过this来使用,不知道我这样总结的对不对,如果不对,欢迎一起探讨