vue笔记(12) vuex

学习内容

⊙ 路径引用的简便写法

⊙ state

⊙ mutations

⊙ getters

⊙ mutations的类型常量

⊙ module

⊙ vuex文件夹的目录组织

路径引用的简便写法

像我上次做的案例一样,每次路径前面都要../一下,不仅麻烦,而且如果复制粘贴这一块代码到了别的文件夹中,路径全部要重新更改

这时可以来到build文件夹中,修改一下配置

使用:

但是要注意,如果是import的话可以直接这样写,但是如果是像那种src的路径,就需要在前面加上一个~符号才能生效

本文由“壹伴编辑器”提供技术支持

vuex

vuex是做什么的

哪些地方要用到vuex

注意一下版本问题,如果是vue2就用vuex3.x的版本,vue3就用vuex4.x的版本

使用:

一般来说,会在src里新建一个文件夹,叫做store,在里面用vuex

拿到vuex里面的Store,创建对象

这个也要挂载在Vue上面

这一步操作就相当于将store赋值给prototype原型上的$store,到时候就可以通过$store获取里面的东西

里面有很多种方法可以使用

1.state

里面放的是状态相关的东西,是一个对象形式,比如我现在放一个counter在里面

现在就可以在Hello.vue里面获取counter的值

在App.vue中使用

效果

如果我们想要修改state的值,官方不推荐在组件内直接修改,而是通过actions或mutations,如果直接修改,devtools是追踪不到的.

devtools浏览器插件需要在Google应用商店下载,需要翻墙…

安装以后,就可以在F12里查看追踪的情况

先试试在组件中直接修改

可以看到当我们直接在组件中修改时,Devtools是跟踪不到state的,所以现在就要使用mutations

2.mutations

store中的index.js

App.vue

效果:

可以追踪到很多信息

3.getters

有时候,我们需要从store中获取state变异后的状态,其实他的用法就和computed差不多,比如现在我想得到counter的平方数

再做一个案例:将学生中年龄大于20的学生筛选出来

index.js

index.js

那么如果我还想获取这些学生的个数呢?这个getters里面的方法不仅可以传state参数,也可以传getters参数

另一个需求,现在由用户来决定过滤掉多大年龄的人,由用户来传参

index.js

我现在再增加一个功能:每次点击按钮让counter增加5或者10

App.vue

注意是commit来提交

index.js

mutations的类型常量

官方推荐将mutations的值弄成统一的常量

比如在store下面建一个mutations-type文件

在文件中导入就能使用这个常量了

4.actions

也就是说在mutations中只能写同步操作,不能写异步操作,异步操作不能被Devtools追踪到

所以我们现在在actions中写一个异步操作

先写几个信息:

现在我的目的是点击按钮以后将info中的名字进行修改

我们先来看看mutations里面怎么写:

但是当然不能直接这样修改,否则就是同步操作了

现在写actions:

最后就是按钮的changeClick事件的写法

(不过真的好麻烦!!!)

看看效果吧:

插件里也能很好的捕捉到异步操作

如果我在异步操作以后还想进行别的操作,比如完成后就打印”信息更改完成”,那要怎么做呢

index.js

那后面的then在哪里呢

在App.vue里面

嗯真的很牛逼…

调用完changeName这个方法以后,接收到的就是return过来的promise对象

module

当应用变得非常复杂时,store对象就有可能变得相当臃肿.为了解决这个问题,vuex允许我们将store分割成模块,而每个模块拥有自己的state,mutations,actions,getters等

如果我们想用module模块里面的东西,我们需要这样用

因为vue会自动将module放进state里面,所以要先调state

假如想要使用mutations里面的方法,还是和之前一样,但是注意不要和之前的mutations里的方法有重复,否则会出问题

actions的用法也差不多,context是视情况变的，在module里面就对应module里的mutations

vuex文件夹目录组织

我们如果将所有的state,mutations等都放在一起,就会十分混乱,所以要将一部分抽离出来

state就不用单独抽到别的文件里了,就在index.js中

mutations单独抽离在一个文件中

剩下的也是差不多

module的话就要单独抽出来,放在module的文件夹中,再分别创建不同module的文件

最后抽完的样子,因为getters里面没东西我就没写…