computed: {
…mapState([‘name’]) // 经过解构后,自动就添加到了计算属性中,此时就可以直接像访问计算属性一样访问它
}
}
你甚至可以给它取别名:
…mapState({ userName: ‘name’ }) // 赋别名的话,这里接收对象,而不是数组
3、Getters 修饰值
设想一个场景,你已经将 store 中的 name 展示到页面上了,而且是很多页面都展示了,此时客户要求在每个 name 前都加上“hello”。
最容易想到的办法就是去每个用到 name 的页面一个一个加上“hello”,显然这种方式并不友好,原因如下:
-
第一,假如你在A、B、C三个页面都用到了 name,那么你要在这A、B、C三个页面都修改一遍,多个页面你就要加很多遍这个方法,造成代码冗余,很不好。
-
第二,假如下次客户让你把“hello”改成“greet”的时候,你又得把三个页面(甚至更多)都改一遍,这时候你是拿石头砸自己的脚。
吸取上面的教训,我们有一个新的思路:直接在 store 中对 name 进行一些操作或者加工,从源头解决问题!这时候,Getter 闪亮登场!
首先,在 store 对象中增加 getters 属性:
const store = new Vuex.Store({
state: {
name: ‘leo’
},
// 在store对象中增加getters属性
getters: {
getMessage(state) { // 获取修饰后的name,第一个参数state为必要参数,必须写在形参上
return hello ${state.name}
;
}
}
});
在组件中使用:
export default {
mounted() {
console.log(this.$store.state.name);
console.log(this. s t o r e . g e t t e r s . g e t M e s s a g e ) ; / / 注意不是 store.getters.getMessage); // 注意不是 store.getters.getMessage);//注意不是store.state了,而是$store.getters
}
}
建议使用 mapGetters:
你也可以给它取别名:
…mapGetters({ greetMsg: ‘getMessage’ }) // 赋别名的话,这里接收对象,而不是数组
4、Mutations 修改值
说到修改值,有的人可能会想到这样写:
this.$store.state.xxx = XXX;
首先,这是一种错误的写法。为什么说是错误的写法?因为这个 store 仓库比较奇怪,你可以随便拿,但是你不能随便改,举个例子:
假如你打开朋友圈,看到你的好友发了条动态,但是动态里有个错别字,你要怎么办呢?你可以帮他改掉吗?当然不可以!我们只能通知他本人去修改,因为是别人的朋友圈,你是无权操作的,只有他自己才能操作。同理,在 Vuex 中,我们不能直接修改仓库里的值,必须用 Vuex 自带的方法去修改。这个时候,Mutation 闪亮登场!
首先,修改 store/index.js:
const store = new Vuex.Store({
state: {
name: ‘leo’,
number: 0,
},
mutations: { // 增加nutations属性
setNumber(state) { // 增加一个mutations的方法,方法的作用是让number从0变成5,state是必须默认参数
state.number = 5;
}
}
});
然后,修改 App.vue:
如果我们想传动态参数怎么办?
首先,修改 store/index.js:
const store = new Vuex.Store({
state: {
name: ‘leo’,
number: 0,
},
mutations: {
setNumber(state, num) { // 增加一个带参数的mutations方法
state.number = num;
},
},
});
相应地,修改 App.vue:
上面的这种传参的方式虽然可以达到目的,但是并不推荐。建议传递一个对象,看起来更美观,对象的名字你可以随意命名,一般命名为 payload:
mutations: {
setNumber(state, payload) { // 增加一个带参数的mutations方法,并且官方建议payload为一个对象
state.number = payload.number;
},
},
相应地,修改 App.vue:
建议使用 mapMutations:
你也可以给它取别名:
methods:{
…mapMutations({ changeNumber: ‘setNumber’ }) // 赋别名的话,这里接收对象,而不是数组
}
注意:Mutations 里面的函数必须是同步操作,不能包含异步操作。
Mutations 只能进行同步操作,所以,我们马上开始下一节,看看使用 Actions 进行异步操作的时候应该注意什么!
5、Actions 异步修改值
Vuex 不希望你将异步操作放在 Mutations 中,所以就给你设置了一个区域,让你进行异步操作,这就是 Actions。
首先,修改 store/index.js:
const store = new Vuex.Store({
state: {
name: ‘leo’,
number: 0,
},
mutations: {
setNumber(state, payload) {
state.number = payload.number;
},
},
actions: { // 增加actions属性
setNum(content) { // 增加setNum方法,默认第一个参数是content,其值是复制的一份store
return new Promise(resolve => { // 模拟异步操作,1秒后修改number为666
setTimeout(() => {
content.commit(‘setNumber’, { number: 666 });
resolve();
}, 1000);
});
}
}
});
然后,修改 App.vue:
async mounted() {
console.log(this.$store.state.number); // 旧值,0
await this.$store.dispatch(‘setNum’); // 等待异步操作完成
console.log(this.$store.state.number); // 新值,666
}
其实 action 就是去提交 mutation 的。异步操作都在 action 中消化了,最后再去提交 mutation。
当然,你也可以进行动态传参。
首先,修改 store/index.js:
actions: {
setNum(content, payload) { // 增加payload参数
return new Promise(resolve => {
setTimeout(() => {
content.commit(‘setNumber’, { number: payload.number });
resolve();
}, 1000);
});
},
}
相应地,修改 App.vue:
async mounted() {
console.log(this.$store.state.number); // 旧值,0
await this.$store.dispatch(‘setNum’, { number: 888 });
console.log(this.$store.state.number); // 新值,888
}
建议使用 mapActions:
你也可以给它取别名:
…mapActions({ changeNumber: ‘setNum’ }) // 赋别名的话,这里接收对象,而不是数组
tips:在 actions 里面,方法的形参可以直接将 commit 解构出来,方便后续操作。
actions: {
setNum({ commit }) { // 直接将content结构掉,解构出commit,下面就可以直接调用了
return new Promise(resolve => {
setTimeout(() => {
commit(‘xxx’); // 直接调用
resolve();
}, 1000);
});
},
},
四、总结
下班前这几分钟,你知道了如何使用 Vuex。你会安装它,配置它,读取 state 的值,甚至修饰读(Getters),然后你会修改里面的值(Mutations),如果有异步操作并且需要修改 state,那你就要使用 Actions。
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/8bc3f4cd21dab166b00b7dec5548936d.jpeg)
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
外链图片转存中…(img-XLfXLxTf-1712260129974)]
[外链图片转存中…(img-rdSjatCw-1712260129975)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-bhbvKoxz-1712260129975)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/8bc3f4cd21dab166b00b7dec5548936d.jpeg)
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。