Vuex 简单入门

今天试了一下 Vuex ，感觉跟 Redux 的实现思想类似。在此，简单地总结一下。

什么是 Vuex

在 Vue 中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护。而 Vuex 就此应运而生。将状态管理单独拎出来，应用统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex 采用和 Redux 类似的单向数据流的方式来管理数据。用户界面负责触发动作（Action）进而改变对应状态（State），从而反映到视图（View）上。如下图所示：

vuex-flow

使用 Vuex

安装：

npm install --save- vuex

引入：

import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)

Vuex 的组成部分

完整的应用 Vuex 开发的应用结构应该是这样的：

vuex-complete

下面针对比较核心的部分进行说明。

State

State 负责存储整个应用的状态数据，一般需要在使用的时候在根节点注入 store 对象，后期就可以使用 this.$store.state 直接获取状态

// store 为实例化生成的import store from './store'new Vue({  el: '#app',  store,  render: h => h(App)})

这个 store 可以理解为一个容器，包含着应用中的 state 等。实例化生成 store 的过程是：

const mutations = {...}const actions = {...}const state = {...}Vuex.Store({  state,  actions,  mutations})

后续在组件中使用的过程中，如果想要获取对应的状态你就可以直接使用 this.$store.state 获取，当然，也可以利用 vuex 提供的 mapState 辅助函数将 state 映射到计算属性中去，如

// 我是组件import {mapState} from 'vuex'export default {  computed: mapState({    count: state => state.count  })}

这样直接就可以在组件中直接使用了。

Mutations

Mutations 的中文意思是“变化”，利用它可以更改状态，本质就是用来处理数据的函数，其接收唯一参数值 state。
store.commit(mutationName) 是用来触发一个 mutation 的方法。需要记住的是，定义的 mutation 必须是同步函数，否则 devtool 中的数据将可能出现问题，使状态改变变得难以跟踪。

const mutations = {  mutationName(state) {    //在这里改变state中的数据  }}

在组件中触发：

//我是一个组件export default {  methods: {    handleClick() {      this.$store.commit('mutationName')    }  }}

或者使用辅助函数 mapMutation 直接将触发函数映射到 methods 上，这样就能在元素事件绑定上直接使用了。如：

import {mapMutations} from 'vuex'//我是一个组件export default {  methods: mapMutations([    'mutationName'  ])}

Actions

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

// 定义 Actionsconst actions = {  actionName({commit}) {    //dosomething    commit('mutationName')  }}

在组件中使用

import {mapActions} from 'vuex'//我是一个组件export default {  methods: mapActions([    'actionName'  ])}

Getters

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

const getters = {  strLength: state => state.aString.length}//上面的代码根据aString状态派生出了一个strLength状态

在组件中使用

import {mapGetters} from 'vuex'//我是一个组件export default {  computed: mapGetters([     'strLength'  ])}

Plugins

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

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

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

参考文档

https://vuex.vuejs.org/zh-cn/intro.html