Vuex 介绍及示例

Vuex 是 Vue.js 的一个状态管理模式和库,用于管理 Vue 应用中的全局状态。它是专门为 Vue.js 应用设计的,充分利用了 Vue 的细粒度响应系统来高效地更新状态。以下是对 Vuex 的一些介绍和它的基本使用方法:

主要概念

  1. State(状态)
    Vuex 使用单一状态树(single state tree)来管理整个应用的状态。这个状态存储在一个对象中,整个应用的所有组件都可以访问这个对象中的数据。

  2. Getter(计算属性)
    Vuex 中的 getter 类似于 Vue 的计算属性(computed properties)。它们可以对 state 进行派生操作并返回结果。

  3. Mutation(变更)
    Vuex 中唯一能更改状态的方法就是提交 mutation。mutation 必须是同步函数。

  4. Action(动作)
    action 类似于 mutation,不同的是:

    • action 提交 mutation 而不是直接变更状态。
    • action 可以包含任意异步操作。
  5. Module(模块)
    由于使用单一状态树,应用中所有的状态会集中到一个大对象。当应用变得非常复杂时,store 对象会变得相当臃肿。为了解决这个问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、getter、mutation 和 action。

安装

首先需要安装 Vuex:

```bash
npm install vuex@next --save
```

然后在 Vue 应用中使用它:

```javascript
import { createApp } from ‘vue’;
import { createStore } from ‘vuex’;
import App from ‘./App.vue’;

// 创建一个新的 store 实例
const store = createStore({
state() {
return {
count: 0
};
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit(‘increment’);
}, 1000);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});

const app = createApp(App);

// 将 store 实例作为插件安装到应用中
app.use(store);
app.mount(‘#app’);
```

使用

在组件中使用 Vuex 的状态和方法:

```vue

{{ count }}

```

上述代码展示了如何在组件中使用 Vuex 的状态、计算属性、同步和异步变更方法。通过 `mapState`、`mapGetters`、`mapMutations` 和 `mapActions`,可以简化 Vuex 状态和方法的映射过程。

Vuex 提供了一种结构化的方式来管理应用的状态,使得应用更容易维护和调试。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/50375.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

平安养老险广西分公司开展7.8公益健步行活动

近日,平安养老保险股份有限公司(以下简称“平安养老险”)广西分公司在南宁邕江沿岸开展“7.8”公益健步行活动,在分公司班子的号召下,各部门内外勤员工均踊跃参与。 员工们沿途随手捡拾垃圾,传递积极、绿色…

就在刚刚,中国 IMO 奥数遗憾地失去了第一名的宝座,连续五年的统治地位被美国队所终结。

🐱 个人主页:TechCodeAI启航,公众号:TechCodeAI 🙋‍♂️ 作者简介:2020参加工作,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫 优质专…

Vue3开源Tree组件研发:节点勾选支持v-model

自研Tree组件有两个原因:1. 目前开源UI对Tree组件的用户API不太友好,2. 提升Vue3组件自研能力。 目前已实现的功能见上面思维导图。想象Tree组件的一个使用场景:后台管理员通过Tree组件来完成用户角色授权,同时支持对权限进行新增…

Spring中使用到的设计模式及其源码分析

前言 众所周知,Spring框架是一个强大而灵活的开发框架。这不,上次的面试刚问到这些,没防住!!!因此下来总结一下。这篇文章主要介绍Spring中使用到的设计模式,自己做个面试复盘,同时…

Spring Security 原理

Spring Security是一个功能强大且广泛使用的身份验证和授权框架,专为保护Java应用程序的安全性而设计。它提供了一套可配置的安全性规则和机制,用于对应用程序的资源进行访问控制和保护。以下是Spring Security的主要原理: 1. 过滤器链&…

富格林:防范虚假可信投资经验

富格林指出,现货黄金投资作为一种全球性的金融衍生品交易,吸引了无数投资者的目光。它不仅具备避险属性,还是资产配置中不可或缺的一部分。然而,要想在市场中防范虚假陷阱,投资者必须要掌握并且利用可信的投资经验。下…

引领安全新风尚:WT2605/WT2003H芯片方案赋能电动汽车,打造智能低速安全报警器"

电动汽车低速报警器(AVAS)方案可采用WT2605或WT2003H方案芯片,可实现当车辆时速低于设定值(如20Km/h),报警器会发出类似发动机加速减速的声音,倒档时装置也会发出倒车警示,在嘈杂的城市环境中帮助提升行人对驶近的电动汽车的感知,降低行人、骑行者和弱势群体面临的风险。 WT26…

十分钟带你入门Go语言(Golang)开发

概述 Go语言是由 Google 的 Robert Griesemer,Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译型语言。Go语言的设计目标是将静态语言的安全性和性能与动态语言的易用性相结合。Go语言在语言层面提供了对协程的支持,特别适合编写高并发的项目。随着使用Go语言…

基于opencv的答题卡识别

文章目录 一、背景需求二、处理步骤图片预处理检测到答题卡轮廓透视变换找每个圆圈的轮廓轮廓排序判断是否答题正确 一、背景需求 传统的手动评分方法耗时且容易出错,自动化评分可以可以显著提高评分过程的速度和准确性、减少人工成本。 答题卡图片处理效果如下&am…

想出国?去外企?建议网工无脑冲思科认证。

近年来,国内职场竞争愈发激烈,内卷现象严重,大部分人都面临着巨大的就业压力,或是找工作无门、或是中年危机悄然来临,时刻担心被职场优化。 在这样的背景下,出国或进入外企工作,成为了许多人寻…

项目中使用多线程

项目中使用多线程 线程池 1、线程池配置 项目中如果要使用线程池,必须先进行配置,如果使用spring 默认的线程池配置可能会导致OOM异常 注意要在spring启动项 上加上EnableAsync 开启异步支持线程池要配置Configuration注解交给spring管理配置线程池主…

SpringMVC笔记详解

SpringMVC 1、SpringMVC简介 1.1、什么是MVC MVC是一种软件架构的思想,将软件按照模型、视图、控制器来划分 M:Model,模型层,指工程中的JavaBean,作用是处理数据 JavaBean分为两类: 一类称为实体类Be…

[JavaScript] 动态获取方法参数名

JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言&am…

Optional类的使用 java8(附代码)

🍰 个人主页:_小白不加班__ 🍞文章有不合理的地方请各位大佬指正。 🍉文章不定期持续更新,如果我的文章对你有帮助➡️ 关注🙏🏻 点赞👍 收藏⭐️ 文章目录 一、什么是Optional?二、…

科研绘图系列:R语言和弦图 (Chord diagram)

介绍 和弦图(Chord Diagram)是一种用于展示多个实体之间相互关系的数据可视化方法。它通常用于表示网络或系统中不同节点(实体)之间的连接强度或流量。和弦图由一个圆形布局组成,每个节点在圆周上占据一个扇形区域,节点之间的连接通过圆内的线条(和弦)来表示。 特点:…

linux环境下重新编译opencv的安卓动态链接库opencv_java4.so文件

一、安装java 1.8 #安装依赖 sudo apt-get install python-software-properties sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo add-apt-repository ppa:ts.sch.gr/ppa sudo apt-get update sudo apt-get install oracle-java8-installer 二…

VB中的函数和子程序(Sub)的区别和用法

在VB(Visual Basic)及其派生语言如VBA(Visual Basic for Applications)中,函数(Function)和子程序(Sub)是两种不同类型的代码块,它们在用途、返回值以及调用方…

前端必知必会-html的id属性和Iframe

文章目录 HTML id 属性类和 ID 之间的区别带有 ID 和链接的 HTML 书签在 JavaScript 中使用 id 属性HTML IframeIframe - 设置高度和宽度Iframe - 删除边框Iframe - 链接的目标总结 HTML id 属性 HTML id 属性用于为 HTML 元素指定唯一 id。id 属性的值在 HTML 文档中必须是唯…

AI推介-大语言模型LLMs论文速览(arXiv方向):2024.07.15-2024.07.20

文章目录~ 1.SegPoint: Segment Any Point Cloud via Large Language Model2.LLMs as Function Approximators: Terminology, Taxonomy, and Questions for Evaluation3.Scaling Laws with Vocabulary: Larger Models Deserve Larger Vocabularies4.Large Language …

数据结构第七讲:栈和队列OJ题

数据结构第七讲:栈和队列OJ题 1.有效的括号2.用队列实现栈3.用栈实现队列4.设计循环队列 1.有效的括号 链接: OJ题目链接 typedef char StackDataType;typedef struct Stack {StackDataType* arr;//使用一个指针来指向开辟的数组int capacity;//保存数组的空间大…