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'
  ])
}

插件就是一个钩子函数，在初始化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