Vue中Vuex的五个属性解释

1、state: vuex的基本数据,用来存储变量;
2、getters: 从基本数据(state)派生的数据,相当于state的计算属性;
3、mutations: 提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的事件类型(type)和一个回调函数(handler)。
回调函数就是我们实际进行状态更改的地方,并且它会接受 state作为第一个参数,提交载荷作为第二个参数。
4、action: 和mutation的功能大致相同,不同之处在于 ①Action提交的是mutation,而不是直接变更状态,②Action可以包含任意异步操作。
5、modules: 模块化vuex,可以让每一个模块拥有自己的 state、mutation、action、 getters,使得结构非常清晰,方便管理。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
VuexVue.js应用程序开发的状态管理模式。它可以集管理应用程序的所有组件的状态,并提供了一些工具来实现状态的更改和响应。Vuex包含五个核心属性,分别是state、getters、mutations、actions和modules。 1. state:状态对象,用于存储应用程序的所有状态数据。状态数据可以通过state属性的getter方法访问。 2. getters:计算属性,用于派生状态数据并对其进行过滤、排序或转换。getters可以被其他getters调用,也可以在组件直接访问。 3. mutations:用于修改应用程序的状态数据。mutations应该是同步的,只能通过commit方法来调用。 4. actions:用于处理异步操作和复杂的业务逻辑。actions可以调用mutations来修改状态,也可以通过dispatch方法来调用其他actions。 5. modules:用于将应用程序的状态数据模块化。每个模块都有自己的state、getters、mutations和actions,可以嵌套其他模块。 基本用法: 1. 创建store对象: ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { doubleCount(state) { return state.count * 2 } } }) export default store ``` 2. 在组件使用store: ``` <template> <div> <p>Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click="increment">Increment</button> <button @click="incrementAsync">Increment Async</button> </div> </template> <script> import { mapState, mapGetters, mapActions } from 'vuex' export default { computed: { ...mapState(['count']), ...mapGetters(['doubleCount']) }, methods: { ...mapActions(['incrementAsync', 'increment']) } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

前端程序猿i

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

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

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

打赏作者

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

抵扣说明:

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

余额充值