学习内容
⊙ 路径引用的简便写法
⊙ 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里面没东西我就没写...