Vue 组件化开发之 Vuex 了解一下(三)

2020 年 1 月 10 日

Vue 组件化开发之 Vuex 了解一下(三)

Actions


Actions 也可以用于改变状态,不过是通过触发 mutation 实现的,重要的是可以包含异步操作。其辅助函数是 mapActions 与 mapMutations 类似,也是绑定在组件的 methods 上的。如果选择直接触发的话,使用 this.$store.dispatch(actionName)方法。


//定义Actionsconst actions = {  actionName({ commit }) {    //dosomething    commit('mutationName')  }}
复制代码


在组件中使用:


import {mapActions} from'vuex'//我是一个组件exportdefault {  methods: mapActions([    'actionName',  ])}
复制代码


Getters


有些状态需要做二次处理,就可以使用 getters。通过 this.$store.getters.valueName 对派生出来的状态进行访问。或者直接使用辅助函数 mapGetters 将其映射到本地计算属性中去。


const getters = {  strLength: state => state.aString.length}
复制代码


//上面的代码根据 aString 状态派生出了一个 strLength 状态


在组件中使用:


import {mapGetters} from'vuex'//我是一个组件exportdefault {  computed: mapGetters([    'strLength'  ])}
复制代码


Plugins


插件就是一个钩子函数,在初始化 store 的时候引入即可。比较常用的是内置的 logger 插件,用于作为调试使用。


import createLogger from'vuex/dist/logger'const store = Vuex.Store({  ...  plugins: [createLogger()]})
复制代码


最后,还有一些高级用法,如严格模式,测试等可能使用频率不会特别高。有需要的时候查官方文档就可以了。总的来说,Vuex 还是相对比较简单的,特别是如果之前有学过 Flux,Redux 之类的话,上手起来更加容易。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/tIxET_5qhollePtyYRbXvw


2020 年 1 月 10 日 11:5058

评论

发布
暂无评论
发现更多内容

架构师训练营—第八周作业

Geek_shu1988

极客大学架构师训练营

Week 4 -作业1

shuyaxx

架构师训练营第八周作业

郎哲158

极客大学架构师训练营

训练营第八周作业 1

仲夏

极客大学架构师训练营

架构师训练营—第八周学习总结

Geek_shu1988

极客大学架构师训练营

RCEP是重振全球经济和反对保护主义的有力工具

CECBC区块链专委会

经济建设 世界经济

周练习 8

何毅曦

【第八周】课后作业

云龙

架构师训练营 第三周 作业

阿光

架构师训练营第八周作业

听夜雨

极客大学架构师训练营

训练营第八周作业 2

仲夏

极客大学架构师训练营

第四周作业一

jingx

一个典型的大型互联网应用系统使用了哪些技术方案和手段

皮蛋

week08作业

追风

架构师一期

第四周 学习小结

Geek_9527

硬核知识点——浏览器中的三类五种请求

执鸢者

前端 浏览器 网络

架构师训练营第八周课后练习

week4 代码重构 作业和学习总结

杨斌

架构师训练营第 2 期 第四周作业

月下独酌

极客大学架构师训练营

架构师训练营第八周学习笔记

郎哲158

极客大学架构师训练营

架构师训练营 1 期第 8 周:性能优化(二)- 作业

piercebn

极客大学架构师训练营

新基建为数字经济注入新动能

CECBC区块链专委会

区块链 大数据

架构师训练营 第三周 学习总结

阿光

架构师训练营 第四周 学习总结

阿光

DDIA 读书笔记(6)数据库事务

莫黎

读书笔记

关于“区块链+”的所有关键点

CECBC区块链专委会

区块链 监管

一个 32 岁「老」码农的复盘:崭露头角

欧雷

前端开发 工作经历

第4周作业

Rocky·Chen

架构师训练营 第四周 作业

阿光

大型互联网应用系统常用技术

梧桐

架构师训练营第 2 期 第四周总结

月下独酌

极客大学架构师训练营

Vue 组件化开发之 Vuex 了解一下(三)-InfoQ