vueX基础

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量219 收藏 1
点赞数 1
分类专栏： Vue.js 文章标签： 前端 vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40588441/article/details/139855919
版权

vueX

在VueX对象中，其实不止有state,还有用来操作state中数据的方法集，以及当我们需要对state中的数据需要加工的方法集等等成员

  • state 存放状态（声明）

  • mutations state成员操作（修改的方法，写在此）

  • getters 加工state成员给外界

  • actions 异步操作（异步修改）

    modules 模块化状态管理

state

跨组件通信，都写在state中

点击改变state中的num值

image-20200930115203320

image-20200930115149564

mutations同步操作

这是对所有属性修改的方法

先在mutations中定义要修改属性所用的方法

image-20200930115538033

在其他页面，调用mutation中定义的方法

image-20200930115929942

image-20200930115714010

actions 异步操作

先在action中定义要修改属性所用的异步方法

image-20200930120313389

在页面中调用，actions中异步方法

image-20200930120408190

简写

辅助函数

mapMutations是Mutations的集合

image-20200930141038236

mapState是state的集合

image-20200930141216583

mapActions是actions的集合

集合中的方法名，必须带引号，并且要和store中index.js中定义的一致

image-20200930141507364

image-20200930141421292

mapGetters是getters的集合

image-20200930142614071

getters

加工state，例如在store/index.js中算总价

在store/index.js中定义

image-20200930141812513

在页面中调用

image-20200930141858680

image-20200930141832222

module

image-20200930142318202

image-20200930142536571

数据简写取值

image-20200930143117879

image-20200930142949762

方法简写取值

image-20200930143409974

控制导航栏的显示与隐藏

image-20200930104249836

通过声明周期改变$store中的数据（不推荐）

image-20200930104640436

通过路由改变

通过路由控制，进入某些页面时，导航栏消失

image-20200930114055312

image-20200930114128534

image-20200930114251712

若梦plus
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex基础
qq_48687155的博客
08-20 218
Vuex基础
vuex基础
fdsal的博客
03-29 241
1.Vuex简单了解 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 换种说法可能更好理解 如果有一些公共的数据需要在多个组件中共享或者某一个状态的改变会影响多个组件，那么这时候用vuex是非常合适的，比如我们经常会看到的中后台都有多风格的切换，这种全局的改变就可以用到vuex去完成！ 使用Vuex管理数据的好处： 能够在 vuex 中集中管理共享的数据，便于开发和后期进行维护 能够高效的实现组件
Vuex 基础
wangyangzxc123的博客
11-01 132
Vuex 介绍. vuex用于组件之间没有直接关系的传值. 是一个专未vue.js应用程序开发的状态管理模式.采用集中式存储管理应用所有的组件状态,解决多组件数据通信 本质上和vue-router 一样是一个基于vue开发的插件. 主要用于大型项目.. 1.手动创建脚手架 1.vue create 脚手架文件名 2.选择Manually手动 3.选择配置项 4.选择 版本2.x 5.选择N 6.选择less 7.标准严格模式 剩下的全部Enter. 创建完毕脚手架...
vuex基础梳理
11-25
vuex官网前几节内容梳理，vuex官网前几节内容梳理，vuex官网前几节内容梳理
vuex基础的知识.7z
06-08
这个压缩包文件"vuex基础的知识.7z"包含了关于 Vuex 的基础知识，以及一些核心特性的详细讲解，非常适合想要深入了解 Vuex 的 Vue 开发者。 首先，我们来详细了解一下 Vuex 的核心概念： 1. **状态（State）**：在...
vuex的基础
01-27
Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue的官方调试工具devtoolsextension，提供了...
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 470
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 996
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 81
【代码】TS如何处理js模块的类型？
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 853
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
2401_85639015的博客
07-19 1562
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
Web Pages 表单
07-20 326
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 502
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 305
thinkphp8图片上传的验证
Vue事件总线（EventBus）的概念、使用以及注意事项
weixin_53216033的博客
07-23 584
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
Known框架实战演练——进销存基础数据
knownchen的专栏
07-23 299
本文介绍如何实现进销存管理系统的基础数据模块，基础数据模块包括商品信息、供应商管理和客户管理3个菜单页面。供应商和客户字段相同，因此可共用一个页面组件类。
vue3 vuex基础使用 案例
05-23
好的，这里为您提供一个基于Vue3和Vuex的简单案例： 首先，需要安装Vue3和Vuex： ``` npm install vue@next vuex@next ``` 然后在`main.js`中引入Vue和Vuex，并创建一个store实例： ```javascript import { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值