vuex的基本认知

Vuex是一个专门为Vue.js应用程序设计的状态管理模式。它集中管理组件的状态,并通过一种可预测的方式改变状态。在Vuex中,应用程序的所有组件共享一个单一的状态树,并且状态的变化是通过提交mutations来进行。

以下是Vuex的基本概念和代码实例说明:

  1. State(状态):Vuex使用一个集中的状态树来存储应用程序的所有状态。state对象定义了应用程序的初始状态,可以在组件中通过this.$store.state来访问。

示例代码:

// 在store中定义state
const store = new Vuex.Store({
  state: {
    count: 0
  }
})

// 在组件中访问state
console.log(this.$store.state.count)

  1. Mutations(变化):Mutations是用于改变状态的函数,它接收state作为第一个参数。Mutations是同步操作,用来保证状态的可追踪性。在组件中,可以通过commit方法提交一个mutation来改变状态。

示例代码:

// 在store中定义mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 在组件中提交mutation
this.$store.commit('increment')

  1. Actions(动作):Actions用于组织和处理异步操作,它可以提交一个或多个mutation来改变状态。Actions可以包含任意异步操作,如调用API、延迟等。

示例代码:

// 在store中定义action
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})

// 在组件中分发action
this.$store.dispatch('incrementAsync')

  1. Getters(计算属性):Getters用于计算状态,它类似于组件中的计算属性。可以基于状态树的状态进行一些具体的操作,然后将结果返回。

示例代码:

// 在store中定义getter
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

// 在组件中使用getter
console.log(this.$store.getters.doubleCount)

通过以上基本概念的使用,我们可以更好地管理和追踪应用程序的状态,并且可以在任意组件中访问和改变状态。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ordinary90

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值