长沙黑马程序员:老毛带你玩转Vue 全局状态管理VUEX

概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

状态是什么？在程序中用什么来描述？

说白了状态就是数据，Vuex就是用来管理我们项目中的一些共享数据的，没有Vuex的时候，我们的数据是放在组件的data选中的，在组件通讯的时候，我们有对应的手段，但相对来说传递数据比较麻烦：

• 父子通讯：props，$emit，事件监听

• 兄弟通讯：EventHub，$on、$emit、$off

什么时候使用Vuex？

需要你进行权衡，小型项目不需要，随着业务功能的复杂程度，可以加入进去。

单向数据流：不能直接在子组件中变更父组件传递过来的数据

核心概念

State

状态，数据

数据获取

在这里可以定义一些全局共享的数据，在各个组件中可以通过this.$store.state.xxx

注意：一定要是全局的（有两个组件以上使用），如果只有本组件使用，那么就没有必要定义到store中去，定义到局部的data中即可

辅助方法：

• 导入：import { mapState } from 'vuex'

• 使用：

  
  new Vue({
  
    computed: {
  
      ...mapState(['count', 'xxx'])
  
      // 把count和xxx当计算属性用就行了
  
      
  
      // 这个mapState(['count', 'xxx'])函数调用完后的返回值形如：{ count() {}, xxx() {} }，用...扩展表达式拆开后，获取到键值对，直接放入到computed对象中了
  
    }
  
  })
  
  

Getter

state计算属性，和计算属性的区别在于，计算属性是定义在组件中的，是局部的，而getter定义在vuex的store中，是全局的，所有组件都能访问到，当我们需要抽取出一些基于state的公共计算属性时，就可以用这个getter统一定义

辅助方法：

• 导入：import { mapGetters } from 'vuex'

• 使用：

  
  new Vue({
  
    computed: {
  
      ...mapGetters(['getCountMsg', 'xxx'])
  
      // 把getCountMsg和xxx当计算属性用就行了
  
    }
  
  })
  
  

Mutation

突变，变异，就是用来改变state，很纯洁，就做一件事

注意：不能有异步操作，不符合规范

高能：更改 Vuex 的 store 中的状态（state）的唯一方法是提交 mutation

可以通过：this.$store.commit('mutaionName', payload)调用到mutation

• mutationName就是mutation的函数名

• payload就是数据（载体）

  • 注意：这里只能传递一个参数，如果需要传递多个，可以通过数组或对象

辅助方法：

• 导入：import { mapMutations } from 'vuex'

• 使用：

  
  new Vue({
  
    methods: {
  
      ...mapMutations(['increaseCount', 'decreaseCount'])
  
      // 把increaseCount和decreaseCount当方法就行了
  
    }
  
  })
  
  

Action

动作，可以在这里写一些业务逻辑，触发突变（Mutation），允许有异步操作

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。

• Action 可以包含任意异步操作。

辅助方法：

• 导入：import { mapActions } from 'vuex'

• 使用：

  
  new Vue({
  
    methods: {
  
      ...mapActions(['increaseCountAsync', 'decreaseCountAsync'])
  
      // 把increaseCount和decreaseCount当方法就行了
  
    }
  
  })
  
  

Module

模块，随着业务复杂度上升，对应的代码肯定比较臃肿，我们可以用模块（Module）来对代码进行重构瘦身，提高代码的可读性

• 访问模块的state：$store.state.user.name

• 访问模块的getters：

• 调用模块的mutations：...mapMutations('user', ['changeName', 'xxx']), // 模块的mapMutations使用

  • 第一个参数user表示命名空间

• 调用模块的actions：

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

注意：模块中的mutations只能拿到本模块的state，但是getters和actions可以获取到

严格模式

开启严格模式，仅需在创建 store 的时候传入 strict: true：

const store = new Vuex.Store({

  // ...

  strict: true

})

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

一般我们都会加上，但是在生成环境不要加上，因为会实时监测，有性能资源浪费

类似于插件，我们可以让构建工具来处理这种情况：

const store = new Vuex.Store({

  // ...

  strict: process.env.NODE_ENV !== 'production'

})

表单处理

想要使用v-model指令绑定store中的state数据，可以使用带有set/get的计算属性

补充说明：mapState、mapGetters方法 computed 选项中、mapMutations、mapActions 放到 methods 选项中

更多资料可以+csheima7