【VUE】9、VUE项目中使用VUEX完成状态管理

Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式,它帮助开发者更有效地管理组件间共享的状态。在 Vue 项目中使用 Vuex,可以解决复杂应用中状态管理的困扰,确保状态变更的可追踪性和一致性。

1、Vuex 核心概念

  1. State(状态): 存储应用中多个组件共享的数据。这是单一的源头,使得组件能够读取状态,但不能直接修改它。
  2. Getters(获取器): 类似于 Vue 中的计算属性,用于从 Store 的 State 中派生出一些状态,可以认为是 Store 的读取方法。
  3. Mutations(突变): 用于改变 State 的唯一方式。每个 Mutation 都有一个字符串类型的事件类型 (type) 和一个回调函数 (handler),该函数接收 State 作为第一个参数。
  4. Actions(动作): Action 提交的是 Mutation,而不是直接改变状态。Action 可以包含任意异步操作,如调用 API。
  5. Modules(模块): 当应用变得非常大时,可以通过模块来分割 Store,每个模块有自己独立的 State、Mutation、Action 和 Getter。

2、安装 Vuex

npm install vuex --save

yarn add vuex

3、初始化 Vuex Store

在 src 目录下新建 store 文件夹,创建一个名为 store.js 的文件,初始化 Vuex Store:

// 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++;},decrement(state) {state.count--;}},actions: {increment({ commit }) {commit('increment');},decrement({ commit }) {commit('decrement');}},getters: {count: state => state.count}
});

4、在 Vue 应用中使用 Store

  • 在 main.js 中引入并使用 Store:
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';Vue.config.productionTip = false;new Vue({store,render: h => h(App),
}).$mount('#app');
  • 在组件中访问 Store:
<template><div><p>{{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
export default {computed: {count() {return this.$store.state.count;}},methods: {increment() {this.$store.commit('increment');},decrement() {this.$store.commit('decrement');}}
};
</script>

5、使用 Getters

<template><div><p>{{ count }}</p></div>
</template><script>
export default {computed: {count() {return this.$store.getters.count;}}
};
</script>

6、使用 Actions

<template><div><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
export default {methods: {increment() {this.$store.dispatch('increment');},decrement() {this.$store.dispatch('decrement');}}
};
</script>

7、模块化 Store

随着应用变得越来越复杂,你可能希望将 Vuex Store 拆分成模块。每个模块可以拥有自己的 state、mutations、actions 和 getters。

// src/store/modules/counter.js
const state = {count: 0
};const mutations = {increment(state) {state.count++;},decrement(state) {state.count--;}
};const actions = {increment({ commit }) {commit('increment');},decrement({ commit }) {commit('decrement');}
};const getters = {count: state => state.count
};export default {state,mutations,actions,getters
};

然后在 store/index.js 中引入模块:

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import counter from './modules/counter';Vue.use(Vuex);export default new Vuex.Store({modules: {counter}
});

以上就是在 Vue 项目中使用 Vuex 的基础流程。通过这种方式,你可以轻松地管理和维护应用程序的全局状态,使状态变更更加清晰可控。随着应用规模的增长,合理划分模块和优化状态管理策略会变得更加重要。

如您在阅读中发现不足,欢迎留言!!!

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

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

相关文章

基于JAVA+SpringBoot+Vue+uniapp+协同过滤算法+爬虫+AI的减肥小程序

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 小程序用户登录&#…

前端开发体系+html文件详解

目录 html骨架 body主体内基本元素 基本元素 超文本&#xff08;超链接跳转&#xff09; 锚点 图片标签 列表标签 表格标签 框架标签&#xff08;窗口标签&#xff09; 音频标签 视频标签 VScode编译器 输入框 字体样式 实例展示&#xff1a; 首先简要介绍前端的整…

在VS2017下FFmpeg+SDL编写最简单的视频播放器

1.下载ShiftMediaProject/FFmpeg 2.下载SDL2 3.新建VC控制台应用 3.配置include和lib 4.把FFmpeg和SDL的dll 复制到工程Debug目录下&#xff0c;并设置调试命令 5.复制一下mp4视频到工程Debug目录下&#xff08;复制一份到*.vcxproj同一目录&#xff0c;用于调试&#xff09; 6…

Integrated Gradients (Pytorch)refs

original paper:《Axiomatic Attribution for Deep Networks》https://arxiv.org/pdf/1703.01365 2)usage : https://blog.paperspace.com/model-interpretability-and-understanding-for-pytorch-using-captum/ https://captum.ai/docs/extension/integrated_gradients 3)htt…

python中的re模块--正则表达式

正则表达式&#xff0c;又称规则表达式。&#xff08;英语&#xff1a;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09;&#xff0c;计算机科 学的一个概念。正则表达式通常被用来检索、替换那些符合某个模 式(规则)的文本 re模块作用 通过使用…

JVM 内存介绍

本文主要介绍&#xff1a; JVM 内存分哪几个区&#xff0c;每个区的作用是什么 备注: 橙色:堆 和 方法区 &#xff0c;属于jvm公有部分,可以进行调优 灰色:java栈,本地方法栈和计数器 属于jvm的私有部分,不可进行调优 一个对象从创建到被回收的过程是怎样的? Personpnew Perso…

【HarmonyOS】HarmonyOS NEXT学习日记:一、创建和运行一个页面

【HarmonyOS】HarmonyOS NEXT学习日记&#xff1a;一 DevEco Studio下载与安装 直接到官网的下载地址下载即可 正常下载、解压、安装完成后 正常来说不会有项目&#xff0c;并且是英文界面。 需要汉化的话可以按照下面的步骤设置插件 选择customize里的 all setting 进入…

探索Mojo编程语言:AI开发者的新宠儿

文章目录 探索Mojo编程语言&#xff1a;AI开发者的新宠儿一、Mojo编程语言概述什么是Mojo&#xff1f; 二、Mojo的安装与配置安装MojoWindowsmacOSLinux 配置Mojo 三、基本语法与数据类型标量变量数组哈希 四、控制结构条件语句循环语句 五、函数与模块函数模块 六、文件操作与…

macOS Sequoia 15(Macos15系统)v15.0 Beta 3发布 macOS Sequoia 15 功能预览

macOS Sequoia 15 功能预览 犀利一如 Mac macOS Sequoia 15(Macos15系统)v15.0 Beta 3测试版本下载安装 连续互通 你的 Mac 上&#xff0c;iPhone 用起来。 有了 iPhone 镜像功能&#xff0c;在 Mac 上就能看到 iPhone 屏幕画面&#xff0c;还能直接进行操控&#xff0c;不拿…

uniapp 实现上传文件的功能

上传单个文件 <script setup>const handleUploadClick () > {console.log("上传文件")uni.chooseImage({success: (chooseImageRes) > {const tempFilePaths chooseImageRes.tempFilePaths;console.log("用户选择的图片&#xff1a;", temp…

网络协同新纪元:Eureka引领分布式网络管理革命

网络协同新纪元&#xff1a;Eureka引领分布式网络管理革命 在微服务架构的浪潮中&#xff0c;服务的分布式网络管理成为了确保系统稳定性和可扩展性的关键。Eureka&#xff0c;作为Netflix开源的服务发现框架&#xff0c;提供了服务注册与发现的核心功能&#xff0c;为分布式网…

誉天教育与武汉晴川学院携手开展鸿蒙实训营,共筑鸿蒙生态新篇章!

在数字经济蓬勃发展的今天&#xff0c;鸿蒙系统作为华为自主研发的操作系统&#xff0c;正逐步构建起一个开放、协同、共赢的生态体系。为了进一步推动鸿蒙生态的繁荣发展&#xff0c;培养更多具备鸿蒙原生应用开发能力的专业人才&#xff0c;誉天教育与武汉晴川学院强强联合&a…

十九、【文本编辑器(五)】排版功能

目录 一、搭建框架 二、实现段落对齐 三、实现文本排序 一、搭建框架 (1) 在imgprocessor.h文件中添加private变量&#xff1a; QLabel *listLabel; //排序设置项QComboBox *listComboBox;QActionGroup *actGrp;QAction *leftAction;QAction *…

C#知识|SqlParameterCollection 只接受非空的 SqlParameter 类型对象,不接受 SqlParameter[] 对象

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 今天在练习C#时遇到报错&#xff1a; SqlParameterCollection 只接受非空的 SqlParameter 类型对象&#xff0c;不接受 SqlParameter[] 对象。 01 为什么使用SqlParameter 开发中之所以采用SqlParameter[]param是因为…

weblogic中间件运维常见问题

背景&#xff1a; 工作需要经常使用到weblogic中间件产品&#xff0c;在维护过程中有遇见的一些常见故障问题&#xff0c;这里分享给大家。 问题一&#xff1a;密码文件报错 问题描述&#xff1a; weblogic应用在启动过程中出现如下的报错内容&#xff1a; # tail -f nohup.ou…

五、 计算机网络(考点篇)试题

A、B、C都没问题&#xff0c;选D。现在基本上所有的互联网网站都是https了&#xff0c;电子支付类的更不用说了。 简单邮件传输的协议是SMTP(发)和POP3(收)&#xff0c;分别是25和110。选B和B 网络分片技术&#xff0c;分割切片嘛。 选C&#xff0c;AES加密等级比较高了&#x…

MFC程序创建word,创建表格,写入数据

文章目录 1、MFC程序功能&#xff1a;2、MFC程序实现2.1 创建项目2.2 添加word操作类2.3 添加word资源2.4 编写代码&#xff0c;实现将数据写入到word2.5 运行程序、验证功能3、工程代码下载 1、MFC程序功能&#xff1a; 创建word文档&#xff1b;向文档中写入字符串&#xff…

Jenkins用户权限管理指定操作任务

安装插件 在 Jenkins 的管理插件中进行插件安装。 搜索插件库&#xff1a;Role-based Authorization Strategy 修改授权策略 在全局安全配置中&#xff0c;把授权策略改为Role-Based Strategy 添加角色规则 在安全中选择Manage and Assign Roles 在Global roles中添加一个…

CentOS 7 中设置系统级代理

在 CentOS 7 中设置系统级代理需要几个步骤。以下是设置系统级代理的方法&#xff1a; 设置环境变量: 编辑 /etc/environment 文件&#xff1a; sudo nano /etc/environment添加以下行&#xff08;替换 proxy_server 和 port 为您的实际代理服务器地址和端口&#xff09;&am…

高效守护:在Eureka中构筑服务的分布式安全防线

高效守护&#xff1a;在Eureka中构筑服务的分布式安全防线 在微服务架构中&#xff0c;服务的安全性是保障整个系统稳定性和可靠性的基石。Eureka作为Netflix开源的服务发现框架&#xff0c;除了提供基本的服务注册与发现功能外&#xff0c;还能在服务的分布式安全策略中扮演重…