Javascript

快速了解 Vuex

本文主要是介绍快速了解 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 节点上,当做函数使用
这篇关于快速了解 Vuex的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!