vuex是什么?

Vuex是一个针对Vue.js应用的状态管理框架,类似于React的Redux。它用于集中管理组件状态,常见应用场景包括登录注册、购物车和复杂逻辑。核心概念包括state、getters、mutations和actions。actions异步地通过触发mutations改变state,并接收context和payload作为参数。在组件中,可以通过方法调用触发Vuex状态更新,以实现单向数据流和跨组件数据共享。

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

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
与react中的redux类似,可以对组件的中的状态进行一个统一集中的管理

应用场景:登录注册、购物车、组件中复杂的逻辑。

核心概念:

  1. state(唯一的状态管理对象)
  2. getters(计算属性,对state中的属性做进一步的处理)
  3. mutations(读写state)
  4. actions(触发mutations)
  5. modules(对以上属性的封装)
state: {
    userinfo: [],
    token: '',
    username: '',
    history: []
  },
  getters:{},
  
   mutations: {
    register(state, users) {
      state.userinfo = users
    },
    },
 actions: {
    register(context, users) {

      context.commit("register", users)

    },
    
    modules: {
    a:{
    state: {},
    getters: {},
    mutations: {},
    actions: {}}
   

  }

其中 actions对state的更改是通过commit触发 mutations进行更改的,对 actions的更改是异步的、通过dispatch函数。

mutations 是有默认的形参的

       ([state] [payload]) 
  • state是当前VueX对象中的state
  • payload是该方法在被调用时传递参数使用的

actions 与mutations类似,

  ([context] [payload]) 

其中 context是 上下文(相当于箭头函数中的this)对象,payload 外部挂载参数。

组件中触发:

this.$store.dispatch("edit",value)

getters:中方法的第三个参数是根节点状态

models:{
    a:{
        state:{key:5},
        getters:{
            getKeyCount(state,getter,rootState){
                return  rootState.key + state.key
            }
        },
        ....
    }
}

我对vuex的理解:

vue中的数据流动是单向的,子组件不能直接修改父组件中的数据。同时子组件和子组件之间不允许相互传值,如果子组件的上级还有层级的话,这样传值就显得很麻烦

这时我们就需要考虑是否应该把这些需要多次用到的数据放到一个地方 便于其他组件的使用。这时候vuex就可以很好的解决这个问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值