【Vuex】使用及核心内容

本文详细介绍了Vue.js应用中使用的状态管理模式Vuex,包括其基本使用方法、核心概念及如何通过Mutation、Action和Getter来管理和操作共享状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 Vuex概述

1.1 组件之间共享数据的方式

父向子传值:v-bind属性绑定(props)
子向父传值:v-on 事件绑定
兄弟组件之间共享数据:EventBus($on数据接收方,$emit发送数据的内个组件)

以上的三种方式是小范围的数据共享

1.2 Vuex是什么

Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享。

1.3 使用Vuex统一管理状态的好处

  • 能够在Vuex中集中管理共享的数据,抑郁开发和后期维护。
  • 能够高效的实现组件之间的数据共享,提高开发效率
  • 存储在Vuex中的数据都是响应式的,能够实时保持数据与页面的同步。

一般情况下,只有组件之间共享的数据,才有必要存储到Vuex中,对于组件中的私有数据,依旧存储在组件自身的data中即可。

2.Vuex的基本使用

  • ① 安装vuex依赖包cnpm install vuex --save
  • ②导入Vuex包import Vuex from 'vuex' Vue.use(Vuex)
  • ③创建store对象
 const store = new Vuex.Store({
     // state中存放的是全局共享的数据
     state:{count:0}
 })
  • 将store对象挂载到vue实例中
new Vue({
    el:'#app',
    render:h=>h(app),
    router,
   //   创建的共享数据对象,挂载到Vue实例中,多有组件可以直接从store中获取全局的数据 
    store
})

3 Vuex 的核心概念

3.1核心概念概述

  • Vuex中的主要核心概念如下:
  • State
  • Mutation
  • Action
  • Getter

3.2 State

State 提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储

    //创建Store数据源,提供唯一的公共数据
    const store =  new Vuex.Store({
        state:{
            count: 0
        }
    })

组件中访问State中数据的方式为:

①this.$store.state.全局数据名称
②利用mapState进行映射,以下是具体的步骤。

    //1.从Vuex中按需导入mapState函数
    import {mapState} from 'vuex'    

通过导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computer计算属性

    //2.将全局数据,映射为当前组件的计算属性
    computed: {
        ...mapState(['count'])
    } 

在Vuex中不允许组件直接修改store里的数据!!

3.3 Mutation

Mutation 用于变更Store中的数据。

  • 只能通过mutation变更Store数据,不可以直接操作Store中的数据。
  • 通过这种方式虽然操作起来稍微繁琐,但是可以集中监控所有数据的变化。
    // 定义Mutation
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            madd(state) {
                // 变更状态
                state.count++
            }
        }
    })

** 触发mutation的第一种方式 **

    // 触发mutation
    methods:{
        handlel(){
            // 触发mutation 的第一种方式
            // $store提供的commit触发mutation中函数的方法
            this.$store.commit('madd')
        }
    }

只有mutation中的函数才有权利修改state中的数据!!

** 调用mutation 时传递参数 :**

    // 定义Mutation
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
        //第一个参数都是state
            addN(state,step) {
                // 变更状态
                state.count += step
            }
        }
    })
    // 触发mutation
    methods: {
        handle2 () {
            // 在调用commit函数,
            // 触发mutation时携带参数
            this.$store.commit('addN',3)
        }
    }

** 触发mutation 的第二种方式 **:

    // 1.vuex中按需导入 mapMutations 函数
    import {mapMutations} from 'vuex

通过导入的mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法

    // 2.将指定的mutations函数,映射为当前组件的methods函数
    methods:{
        ...mapMutations(['madd','addN'])
    }

mutation 中不能写异步操作

3.4 Action

  Action 用于处理异步任务;
  如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是Action中还是要通过触发Mutation的方式间接变更数据。

    // store.js
    // 定义Action 
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            madd(state) {
                state.count++
            }
        },
        actions: {
            addAsync(context) {
                setTimeout(() => {
                    context.commit('madd')
                },1000)
            }
        }
    })
    // 对应组件中
    methods: {
        handle() {
            // 这里dispatch 函数,专门用来触发action
            // dispatch触发actions 的第一种方式
            this.$store.dispatch('addAsync')
        }
    }

    在actions中,不能直接修改 state 中的数据。如果要修改必须通过 context.commit() 触发某个 mutation 才行。换而言之,action并没有修改state的权利

触发actions异步任务时携带参数

this.$store.dispatch()是触发actions的第一种方式;
触发actions的第二种方式:

    // 1.vuex中按需导入 mapActions 函数
    import {mapActions} from 'vuex

通过导入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法:

// 将全局store中的某个actions方法映射为methods方法
// 使用映射方法时,既可以直接使用,也可以声明一个函数,将其引入使用。如果被映射的函数是一个带参数的函数,可以直接将参数写入
    ...mapActions(['addAsync','addNASync'])

3.5 Getter

Getter用于对Store中的数据进行加工处理形成新的数据。
它不会修改state中的原数据,只起到包装的作用
①Getter可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
②Store中数据发生变化之后,getter的数据也会跟着变化。

    // 定义getter
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        getters: {
            showNum: state => {
                return '当前最新的数量是【' + state.count + '】'
            }
        }
    })

使用getters的第一种方式:
this.$store.getters.名称
使用getters的第二种方式:

    import { mapGetters } from 'vuex'
    // 可以将Getters中的内容映射到computed中
    computed: {
        ...mapGetters(['showNum'])
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值