Vuex的魔法宝典:掌握State, Getters, Mutations和Actions,让状态管理不再是难题

简介: 【8月更文挑战第27天】Vuex是Vue.js应用程序的状态管理工具,通过集中式存储管理组件状态并确保状态按照预定义的规则发生变化。

Vuex 是 Vue.js 应用程序的状态管理模式和库,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的核心概念包括 State、Getters、Mutations 和 Actions。本文将深入探讨这些概念,并提供示例代码来帮助理解。

State

State 是 Vuex 存储所有状态的地方,可以认为是应用的大脑。它是一个单一的对象,包含了应用中所有需要共享的数据。State 必须是响应式的,Vuex 通过使用 Vue 的响应式系统来实现这一点。

Getters

Getters 是 Vuex 中的计算属性,允许你从 State 中派生出一些状态。它们可以被看作是 store 的属性,当 State 发生变化时,相关的 getters 也会相应地更新。Getters 是组件中访问 Vuex State 的推荐方式。

Mutations

Mutations 是同步函数,用于修改 State。因为 State 是只读的,所以任何对 State 的修改都必须通过 Mutations 来完成。Mutations 接收 State 作为第一个参数,允许你更改 State。

Actions

Actions 类似于 Mutations,但它们可以包含异步操作。Actions 通过调用 Mutations 来最终修改 State。它们可以处理更复杂的逻辑,如 API 请求,然后提交 Mutations 来更新 State。

示例代码

以下是一个简单的 Vuex 示例,展示了 State、Getters、Mutations 和 Actions 的使用:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
   
  state: {
   
    count: 0
  },
  getters: {
   
    doubleCount: state => state.count * 2
  },
  mutations: {
   
    increment(state) {
   
      state.count++;
    }
  },
  actions: {
   
    incrementAsync({
    commit }) {
   
      setTimeout(() => {
   
        commit('increment');
      }, 1000);
    }
  }
});

使用 Vuex

在 Vue 组件中,你可以这样使用 Vuex:

// MyComponent.vue
<template>
  <div>
    <p>{
   {
    doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import {
    mapGetters, mapActions } from 'vuex';

export default {
   
  computed: {
   
    ...mapGetters(['doubleCount'])
  },
  methods: {
   
    ...mapActions(['increment', 'incrementAsync'])
  }
};
</script>

总结

Vuex 的 State、Getters、Mutations 和 Actions 提供了一个强大且灵活的方式来管理应用的状态。State 作为单一数据源,保证了状态的一致性;Getters 允许你派生状态,方便组件访问;Mutations 确保了状态的同步修改;Actions 支持异步操作,使得状态管理更加灵活。通过理解这些核心概念,你可以更有效地使用 Vuex 来构建复杂的 Vue 应用。

Vuex 的设计哲学强调了状态的集中管理和可预测性,这使得它成为大型 Vue 应用的首选状态管理解决方案。随着 Vue 3 的发布,Vuex 也迎来了新的特性和改进,进一步增强了其功能和性能。

相关文章
|
存储 JSON 资源调度
10分钟带你从0到1搭建monorepo 工程化项目(一)
前言 大家好,我是Fly哥, 之前写博客的仓库,还是用的原生的html 和js 也没有引入 ts , 和一些工程化的东西, 所以自己重新搭建了一套前端项目架构 基于 lerna + yarn 的 monrepo的仓库, 主要是后面会学习输出的一些东西, 整个架子先搭建起来。 2d 和 3d 公共 util 的封装 个人 npm 包的发布 (rollup) 2d react 项目 搭建(vite) 3d react 项目 搭建 (webpack) 搭建一套基于webpack 5 的cli 每个项目都有一些特定的依赖, 但是也会有一些相同的依赖。比如eslint、 babel 的一些基础配置,
10分钟带你从0到1搭建monorepo 工程化项目(一)
|
存储 算法 定位技术
每个系统都在用的appid、appkey、appsecret都是什么意思?
每个系统都在用的appid、appkey、appsecret都是什么意思?
12105 0
|
JavaScript 前端开发
|
JavaScript
cnpm 的安装与使用
本文介绍了npm和cnpm的概念、安装nodejs的步骤,以及cnpm的安装和使用方法,提供了通过配置npm使用中国镜像源来加速包下载的替代方案,并说明了如何恢复npm默认仓库地址。
cnpm 的安装与使用
|
12月前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
242 1
|
JavaScript 前端开发 API
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
2992 1
|
JavaScript 容器
form-create-designer中怎么扩展自定义组件
该内容是关于在某个框架(可能是Vue)中导入和使用自定义组件的教程。首先,通过`import`语句引入自定义组件`MyButton`和`FcDesigner`。然后,使用`FcDesigner.component()`或`app.component()`方法挂载组件。接着,定义组件的拖拽规则,包括其在菜单的位置、图标、名称和唯一ID,以及组件的渲染和属性配置规则。最后,将组件的拖拽规则挂载到设计器(`$refs.designer`)中,以便在界面上使用。
620 2
|
数据可视化
漏刻有时数据可视化Echarts组件开发(16):map3D实现360连续旋转的解决方案
漏刻有时数据可视化Echarts组件开发(16):map3D实现360连续旋转的解决方案
198 0
|
API 开发工具 UED
Mailgun邮箱API发送邮件方法
Mailgun是强大的邮件服务提供商,提供简单API用于发送和管理邮件。要使用Mailgun API发送邮件,需在Mailgun网站注册并获取API密钥,安装SDK(支持多种语言),配置API密钥,然后编写发送邮件的代码,包括设置发件人、收件人、主题和内容。发送测试邮件以验证功能正常,并可在Mailgun控制台查看发送状态。AokSend支持大规模验证码发送,触发式和SMTP/API接口,确保高触达的邮件发送服务,优化用户体验。
|
缓存 前端开发 JavaScript
深入理解React Hooks:原理、应用与最佳实践
【4月更文挑战第6天】React Hooks是16.8版引入的更新,允许在函数组件中处理状态和生命周期。useState用于添加状态,返回状态值和更新函数。useEffect处理副作用,根据依赖项执行和清理。其他Hooks如useContext和useReducer进一步扩展功能。Hooks适用于状态管理、生命周期逻辑、性能优化和跨组件共享。最佳实践包括明确依赖、避免滥用、编写自定义Hook和遵循规则。它们提高了代码可读性和复用性,通过理解原理和实践,开发者能更好地掌握React开发。
931 1