Vuex 的安装与配置

聚沙成塔·每天进步一点点

本文内容

  • ⭐ 专栏简介
  • Vuex 的安装与配置
    • 1. 安装 Vuex
      • 使用 npm 安装
      • 使用 yarn 安装
    • 2. 配置 Vuex
      • 创建和配置 store
      • 将 store 注入到 Vue 实例中
    • 3. 在组件中使用 Vuex
      • 访问 State
      • 提交 Mutation
      • 分发 Action
      • 使用 Getter
    • 原理解析
    • 小结
  • ⭐ 写在最后


⭐ 专栏简介

Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏!创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料,让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏,让我们一同踏上更深入的 Vue学习之旅!为你的前端技能树添砖加瓦!

在这里插入图片描述


Vuex 的安装与配置

Vuex 是 Vue.js 官方推荐的状态管理库,主要用于管理和维护 Vue 应用中的状态。本文将详细介绍如何安装和配置 Vuex,以便在 Vue 应用中使用。

1. 安装 Vuex

首先,我们需要将 Vuex 安装到我们的 Vue 项目中。可以使用 npm 或 yarn 进行安装。

使用 npm 安装

npm install vuex --save

使用 yarn 安装

yarn add vuex

2. 配置 Vuex

安装完成后,我们需要在项目中进行配置。在 Vue 项目中,通常会在 src 目录下创建一个 store 文件夹,然后在其中创建一个 index.js 文件来配置 Vuex。

创建和配置 store

  1. src 目录下创建 store 文件夹:
mkdir src/store
  1. store 文件夹中创建 index.js 文件:
touch src/store/index.js
  1. 配置 index.js 文件:
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

将 store 注入到 Vue 实例中

接下来,我们需要将创建的 store 注入到 Vue 实例中。通常在 main.js 文件中进行配置:

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store' // 引入 store

Vue.config.productionTip = false

new Vue({
  store, // 注入 store
  render: h => h(App),
}).$mount('#app')

3. 在组件中使用 Vuex

完成上述配置后,我们就可以在 Vue 组件中使用 Vuex 进行状态管理了。

访问 State

在组件中,可以使用 this.$store.state 访问 Vuex 的 state:

<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

提交 Mutation

可以通过 this.$store.commit 提交 mutation 更改 state:

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

分发 Action

可以通过 this.$store.dispatch 分发 action 执行异步操作:

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>

使用 Getter

可以通过 this.$store.getters 访问 getter:

<template>
  <div>
    <p>{{ doubleCount }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  }
}
</script>

原理解析

Vuex 的核心是一个单一状态树,它通过 Vue 的响应式系统进行管理。在组件中对 state 的任何修改,都会自动更新视图,从而保证了状态和视图的一致性。下面是 Vuex 的工作流程图:

  1. State(状态): 存储应用的共享状态。
  2. Getter(获取器): 计算属性,用于获取 state。
  3. Mutation(突变): 更改 state 的唯一方式。
  4. Action(动作): 包含异步操作或复杂逻辑,然后提交 mutation。
  5. Module(模块): 将 store 拆分成独立的模块。

通过这样的设计,Vuex 提供了一种结构化的方式来管理 Vue 应用中的状态,使得状态变更更可预测、更容易调试。

小结

以上介绍了 Vuex 的安装和配置,以及在 Vue 组件中如何使用 Vuex 进行状态管理。通过 Vuex,我们可以更方便地管理应用的状态,提高开发效率和代码可维护性。


⭐ 写在最后

欢迎来到《Vue技能树专栏》!本专栏旨在帮助您全面深入地掌握Vue.js,一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者,这里都将为您提供详细的指导、实用的技巧以及深入的理解,助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正,我们一起进步,

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2. MySQL 数据类型和存储引擎

文章目录 【 1. 数据类型 】1.1 数值类型1.1.1 整型1.1.2 小数1.1.3 数值类型的选择 1.2 日期和时间YEAR 年TIME 时间DATE 日期DATETIME 日期时间TIMESTAMP 时间戳日期和时间的选择 1.3 文本字符串CHAR 固定字符串、VARCHAR 可变字符串TEXT 文本ENUM 枚举SET 集合字符串类型的选…

k8s-部署对象存储minio

环境信息 minio版本 :最新 k8s 版本1.22 使用nfs作为共享存储 一.单节点安装包部署 脚本部署&#xff0c;一键部署&#xff0c;单节点应用于数据量小&#xff0c;一些缓存存储&#xff0c;比如gitlab-runner的产物数据&#xff0c;maven的打包依赖数据 #!/bin/bash# 步骤…

如何高效管理自己的时间,可以从这几个方向着手

如果你是上班族&#xff0c;天选打工人&#xff0c;你的绝大多数时间都属于老板&#xff0c;能够自己支配的时间其实并不多&#xff0c;所以你可能察觉不到时间管理的重要性。 但如果你是自由职业者或者创业者&#xff0c;想要做出点成绩&#xff0c;那你就需要做好时间管理&am…

jadx-gui-1.5 反编译工具使用教程 反混淆 Java android 查看签名

JADX&#xff1a;JADX是一个强大的反编译工具&#xff0c;它支持命令行和图形界面操作。除了基本的反编译功能外&#xff0c;JADX还提供了反混淆功能&#xff0c;有助于提高反编译后代码的可读性。 在Android开发和安全分析领域&#xff0c;反编译工具扮演着至关重要的角色。这…

VSCode插件Sort Lines

Sort Lines是一款VSCode中的扩展&#xff0c;可以帮助你对所选文本或整个文件中的行进行排序。可以给你按字母大小排序&#xff08;升序、降序&#xff09;&#xff0c;也可以进行排序去重。而且还能将所有文本打乱顺序。做短文本分类的训练&#xff0c;清洗数据集的时候&#…

Linux系统安全及其应用

文章目录 一、用户账号安全管理1.1 系统账号的清理1.2 对用户账号的操作1.2.1 锁定和解锁用户1.2.2 删除无用账号 1.3 对重要文件进行锁定1.4 密码安全控制1.4.1 新建用户1.4.2 已有用户 二、历史命令管理2.1 历史命令限制2.2 自动清空历史命令 三、设置终端登录的安全管理3.1 …

[Vulfocus解题系列]spring 命令执行(CVE-2022-22947)

环境部署 使用docker部署环境 漏洞等级&#xff1a;高危 3 月 1 日&#xff0c;VMware 官方发布安全公告&#xff0c;声明对 Spring Cloud Gateway 中的一处命令注入漏洞进行了修复&#xff0c;漏洞编号为CVE-2022-22947 Spring官方发布 漏洞描述 使用 Spring Cloud Gate…

InvokeAI学习教程三:换脸

启动InvokeAI&#xff0c;我们先生成一张图&#xff1a; 在正向提示词里输入&#xff1a;Avant-garde couture, tactile textures, vogue aesthetics, vibrant color palette, intricate embroidery details, dramatic silhouettes 生成一张高贵夫人的图像&#xff0c; 或者你从…

android高效读图方式——Hardwarebuffer读图

安卓上有许许多多使用OpenGL来渲染的原因&#xff0c;比方说做特效/动画/硬解/人脸识别等等。渲染完成后如何从gpu中把数据快速读取出来也是高效图像处理中的重要的一环。 相对于glReadPixel的同步读取方式&#xff0c;安卓GLES3.0提供了更高效快速的Hardwarebuffer读图方式&a…

Jenkins的jdk和maven配置

目录 传送门前言一、概念二、JDK的配置三、Maven配置四、环境变量配置五、坑 传送门 SpringMVC的源码解析&#xff08;精品&#xff09; Spring6的源码解析&#xff08;精品&#xff09; SpringBoot3框架&#xff08;精品&#xff09; MyBatis框架&#xff08;精品&#xff09…

隐藏饼图的legend,重写legend列表。

因为要实现的饼图效果较复杂,所以,需要重新写列表。 点击右侧列表的圆点,实现隐藏左侧饼图相应环状。 // 饼图,点击自定义列表,显示和隐藏饼图对应的环状数据<template> <div class="index_div"> <a-spin :spinning="aLoading">&l…

数据保护技巧揭秘:为导出文件添加防护密码的实用指南

一、前言 当涉及到敏感数据的导出和共享时&#xff0c;数据安全是至关重要的。在现代数字化时代&#xff0c;保护个人和机密信息免受未经授权的访问和窃取是每个组织和个人的首要任务之一。在这种背景下&#xff0c;葡萄城的纯前端表格控件 SpreadJS 提供的加密功能为用户提供…

【Java面试】九、微服务篇SpringCloud(上)

文章目录 1、SpringCloud五大组件2、服务注册和发现2.1 Eurake2.2 Eurake和Nacos的区别 3、Ribbon负载均衡3.1 策略3.2 自定义负载均衡策略 4、服务雪崩与熔断降级4.1 服务雪崩4.2 服务降级4.3 服务熔断 5、服务限流5.1 Nginx限流5.2 网关限流 6、微服务监控7、面试 1、SpringC…

电力系统上线测试工具介绍

上线测试 电力系统上线测试工具主要用于在电力系统建设完成后&#xff0c;对系统进行全面的功能和性能测试。这些工具可以模拟各种运行环境和负载情况&#xff0c;以检测电力系统的性能和稳定性。 以下是几种常见的电力系统上线测试工具&#xff1a; 1. 负载测试工具&#x…

高低温光照综合试验整车综合性能步入式环境实验舱

高低温光照综合试验整车综合性能步入式环境实验舱 整车综合性能试验舱主要用于整车高低温存放试验、整车除霜、除雾性能试验、整车冷起动性能试验、整车采暖及制冷性能试验、组合全光谱阳光模拟检测成套零部件或整车在阳光照射下的实验室加速老化性能。高低温光照综合试验整车…

[ICPC2024 Xi‘an I] ICPC2024 邀请赛西安站(7/8/13)

心得 [ICPC2024 Xian I] ICPC2024 邀请赛西安站重现赛 - 比赛详情 - 洛谷 7表示赛时ac了7个&#xff0c;8表示含补题总共ac数&#xff0c;13表示题目总数 题目 M. Chained Lights 打表&#xff0c;发现只有k1是YES //#include <bits/stdc.h> #include<iostream&…

idea解决“源根之外的java文件“的问题

一&#xff0c;问题 idea编辑器打开一些老Spring项目&#xff0c;会出现项目结构解析不正确&#xff0c;最后整个项目的java文件都无法正常运行&#xff0c;显示“源根之外的java文件”。 二&#xff0c;解决 打开File->项目结构 选中模块&#xff0c;然后在右边选中对应的…

2024年武汉东湖高新中级职称报名时间是什么时候?

2024年武汉市东湖高新中级职称上半年批次报名已经截止了&#xff0c;下半年东湖高新至少还有一次报名机会&#xff0c;所以各位东湖高新区评职称的朋友们&#xff0c;不要错过这次了。 2024年武汉东湖高新区中级职称报名条件&#xff1a; 1.东湖高新区社保满足1年&#xff0c;近…

LayerSkip:加速大模型推理的端到端解决方案

大模型&#xff08;LLMs&#xff09;在多种应用中表现出色&#xff0c;但其高昂的计算和内存需求导致部署成本昂贵&#xff0c;尤其是在GPU服务器上。现有加速方案在部署到普通GPU时往往会导致准确性显著下降&#xff0c;而将大模型&#xff08;LLMs&#xff09;进一步加速以部…

时间复杂度与空间复杂度的计算

空间复杂度 (O(1)) 空间复杂度是衡量算法在运行过程中所需的额外内存空间。(O(1)) 表示算法只需要常量级别的额外空间&#xff0c;不会随着输入数据的大小 (n) 增加而增加。也就是说&#xff0c;无论处理的数据有多大&#xff0c;算法所需的额外内存空间始终是固定的。 对于选…