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

阅读数:1 2020 年 1 月 10 日 11:50

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

Actions

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

复制代码
// 定义 Actions
const 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

评论

发布