vuex如何实现进行分包的快速管理?(超级简单详细版)

271 阅读1分钟

1.在store中创建index.js,(创建的名字看个人习惯,有的人喜欢直接用modules.js,因人而异。)

作用:为了引入实例 通过modules{} 进行分包的处理。

image-20230424172410200.png

2.store的引入

要是通过Vue-cli快速创建的话 选中了vuex的话是不需要引入的,创建的时候就已经给引入好了。

image-20230424172710074.png

3.store文件夹下还会有User、Home、Search等等...

这些文件夹是需要看你自己项目的文件的 (名字也是随便起的,看心情.

我的文件夹:

image-20230424173211541.png

4.user文件夹下的内容,都是分模块管理的(这些应该是很好理解的,我写的都是vuex的名称)

image-20230424173309110.png

5.其实最主要的还是user文件夹下的index.js文件

目的:导出所有的模块

image-20230424173510262.png

actions.js文件:(为什么单独拿出这个文件呢?)

因为当初我因为this指向的问题报错了,所以我这里把this的指向改成了Vue,可以着重看一下

6.获取数据

直接在create或者mounted中获取,这两个钩子都可以,也是看自己,(我用的是mounted)

image-20230424174142287.png

附个生命周期图,可以自行参考(这个图是小编自己找的,看着容易理解。)

2021032421314699.png

7.关于持久化的问题?

我这里是没有用任何的插件(我看到网上很多人都安装了插件,然后进行配置)

我是用if判断的,要是为空的话就重新赋值

if (JSON.stringify(this.$store.state.user.avatar == "[]")) {
      this.$store.dispatch("user/userInfo");
 }