快速了解 Vuex

Vuex

一、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

二、为什么使用Vuex

如果一个项目频繁使用组件之间的关系，来修改data中的值。一旦项目规模庞大起来，那么管理这些数据会非常棘手。

为此Vue官网为这些频繁需要修改并且监测其变化的数值，提供了一个管理工具就是 Vuex

三、如何使用Vuex

核心概念

每一个vuex都是一个store对象，每个对象都有以下5个核心概念

• state:定义共享数据源
• mutations:唯一可以同步修改共享数据源的数据操作员
• actions:可以异步操作，但是不能直接修改state数据源，需要commit到mutations
• getters: vuex的计算属性，当数据需要依赖state中的一个数据或者多个数据计算得来的话，可以定义到这里
• modules: 分模块，让代码更加清晰，便于维护

使用方式

两种 使用方式

• state

  直接使用

  this.$store.state.state中的数据名
  

  映射使用

  import { mapState } from 'vuex'
  export default {
    computed: {
      // 在 template 中配合 指令、插值表达式使用
     ...mapState(['state中的属性名'])
     }
   }
  

• mutations

  直接使用

  this.$store.commit('mutaitions的函数名',函数需要的参数)
  

  映射使用

  import { mapMutations } from 'vuex'
  export default {
      methods: {
          ...mapMutations(['mutations中的函数名'])
          // 自定义需要的方法，使用mutations来修改state中的数据
          addFn(){
      		// this.mutations中的函数名
  		}
      }
  }
  

• actions

  直接使用

  this.$store.dispatch('actions中的函数名',该函数需要的参数)
  

  映射使用

  import { mapActions } from 'vuex'
  export default {
      methods: {
          ...mapActions(['actions函数名'])
          asyncSubFn(){
      		// this.actions函数名
  		}
      }
  }
  

• getters

  直接使用

  this.$store.getters.getters的名字
  

  映射使用

  import { mapGetters } from 'vuex'
  export default {
      computed: {
          // 在 template 中配合 指令、插值表达式使用
          ...mapGetters(['getters的名字'])
      }
  }
  

• modules

  分模块

  const store = new Vuex.Store({
      modules: {
          state(){},
          mutations:{},
          actions:{},
          getters:{},
          // ...可以继续在这里分模块
      }
  })
  

  对取值造成的影响

  对state取值有影响，对其他暂无影响

  无论是直接使用还是映射使用，都需要带上模块名

总结

• state和getters 都是数据源，映射到组件的 computed 节点上，当做计算属性使用
• mutations 和 actions 都是操作数据的，映射到组件的 methods 节点上，当做函数使用