19-2.vuex

已于 2023-08-02 15:38:07 修改
阅读量549 收藏
点赞数
分类专栏： Vue笔记 文章标签： vue.js 前端 javascript
于 2023-08-02 14:20:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/potato123232/article/details/132061381
版权

目录

1  安装

2  挂载

2.1  vue2写法

2.2  vue3写法

3  state

3.1  声明数据

3.2  使用数据

3.3  处理数据

4  mutations

4.1  基本使用

4.2  传递参数

4.3  mutations中不能写异步的代码

5  actions

5.1  基本使用

5.2  传递参数

6  getters

Vuex是做全局数据共享的，如果不使用vuex，每个组件的数据传来传去的很麻烦

我们下面通过vue3来使用vuex

1  安装

2  挂载

2.1  vue2写法

2.2  vue3写法

3  state

state是放数据用的

3.1  声明数据

声明的数据所有的组件都可以使用

3.2  使用数据

也可以用下面这种方式使用数据，下面这种方式感觉麻烦一些

3.3  处理数据

你可以这样搞

这样搞是可以生效的，点击按钮后something的值会+1

但是vuex不建议你这样搞，因为这样你会把函数定义的哪里都有，你改起来很麻烦。vuex建议你使用mutations

4  mutations

4.1  基本使用

mutations存放 操作state中的数据的函数，函数不能包含异步操作，我们做个例子

先在mutations中定义改变something的函数

然后在组件中使用

最后把组件在app中渲染

4.2  传递参数

定义

用

可以成功实现效果

用下面这种方法也可以在组件中使用mutations，相较于上面的方法我觉得麻烦了一些

4.3  mutations中不能写异步的代码

我们写一个看看

点击按钮过1s后，虽然页面上的值改变了，但是state中的值没有改变

如果你要执行异步操作，你需要使用action

5  actions

5.1  基本使用

action存放 操作state中的数据的函数的异步操作部分，action如果想操作state中的数据，只能配合mutations使用，我们做个例子

  • 如果你不操作state中的数据就不用配合mutations，比如就单单发一个axios请求

在点击按钮的1s后，页面上的值发生了改变，state中的值也发生了改变

5.2  传递参数

像我们上面的例子就把 88 写死了，这样不是很好用，如果要通过action传递参数，我们可以这样写

1s后页面上的值改变了，state中的值也改变了

用下面这种方法也可以在组件中使用actions，相较于上面的方法感觉麻烦了些

6  getters

getters相当于是vuex中的计算属性，你可以在getters对state的值进行加工，我们做个例子

定义getters

使用getters

打开后是这样的

点击一下按钮getters的值也会发生相应的改变

也可以用下面这种方法在组件中使用getters，相较于上面的方法，下面的就麻烦了些

Suyuoa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue2021常用面试题大全-router-vuex-指令
weixin_59728765的博客
10-18 361
1.Vue的核心是什么 Vue是一套构建用户界面的渐进式自底向上增量开发的MVVM框架，vue的核心只关注视图层， 核心思想： 数据驱动（视图的内容随着数据的改变而改变） 组件化（可以增加代码的复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚低耦合） 2.请简述你对vue的理解 Vue是一套构建用户界面的渐进式的自底向上增量开发的MVVM框架，核心是关注视图层，vue的核心是为了解决数据的绑定问题，为了开发大型单页面应用和组件化，所以vue的核心思想是数据驱动和组件化，这里也说一下MVV
vue-cli中vueX的安装与使用
WebDestiny的博客
09-11 4314
前言： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，但并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发实际需要进行权衡和确定。 运用vueX的场景： 多个视图依赖于同一状态，此时传参的方法对于多层嵌套的组件将...
5-3.vuex的getters
weixin_45660035的博客
01-17 205
1.getters的作用 vuex的getters属性所扮演的角色基本和vue的computed属性相同，都是计算属性，当你需要对原始数据进行过滤或计算时可以使用该属性进行处理。 可分为两种方式使用： 不需要传参：通过属性访问，结果可以缓存 需要传参：通过方法访问，结果不可以缓存 2.不传参的使用方式 1.代码展示 ...
Uncaught TypeError: Object(...) is not a function at resetStoreState (vuex.esm-browser.js?5502:1
zqk的博客
02-20 5022
Uncaught TypeError: Object(...) is not a function at resetStoreState (vuex.esm-browser.js?5502:140:1) at new Store (vuex.esm-browser.js?5502:932:1) at eval (index.js?4360:48:1) at Module../src/store/index.js (index.js:1115:1) at __webpa
Uncaught TypeError Object(...) is not a function at resetStoreState (vuex.esm-browser.js55021
emgexgb_sef的博客
03-11 3235
目录 原因：Vue 2.x和Vuex 4.x版本不对应 同样的问题也会出现在vue-router等依赖包上 问题 控制台报错 vuex源码报错 google浏览器源代码 ?VSCode 解决 补充：运行Vue项目 原因：Vue 2.x和Vuex 4.x版本不对应 Vue 3 匹配Vuex 4 ，Vue 2 匹配Vuex 3 Vuex 是什么？ | Vuex[这里是图片001]https://vuex.vuejs.org/zh/ 问题 控制台报错 Uncaught TypeError: Object(…)
Vuejs入门代码-2.zip
02-11
6. **vue-basic-lesson-19**: 可能讲解Vue的异步数据处理和状态管理，比如如何在组件中使用`axios`进行HTTP请求，以及如何使用Vuex来集中管理全局状态。 7. **vue-basic-lesson-24**: 可能包括组件间的通信方法，如...
npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/cli-plugin-vuex@4.4.6 npm ERR! Found: @vue/cli-service@5.0.8 npm ERR! node_modules/@vue/cli-service npm ERR! dev @vue/cli-service@"^5.0.8" from the root project npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0 || ^5.0.0-0" from @vue/cli-plugin-babel@5.0.8 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"^5.0.8" from the root project npm ERR! 3 more (@vue/cli-plugin-pwa, @vue/cli-plugin-router, @vue/cli-plugin-vuex) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-vuex@4.4.6 npm ERR! node_modules/@vue/cli-plugin-vuex npm ERR! dev @vue/cli-plugin-vuex@"~4.4.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: @vue/cli-service@4.5.19 npm ERR! node_modules/@vue/cli-service npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-vuex@4.4.6 npm ERR! node_modules/@vue/cli-plugin-vuex npm ERR! dev @vue/cli-plugin-vuex@"~4.4.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! C:\Users\35514\AppData\Local\npm-cache\_logs\2023-06-08T07_30_06_817Z-eresolve-report.txt npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\35514\AppData\Local\npm-cache\_logs\2023-06-08T07_30_06_817Z-debug-0.log
06-09
2. 存在依赖冲突。这个问题可能是由于你安装的不同模块之间依赖的版本不兼容导致的。你可以尝试以下方法来解决这个问题： - 使用 `npm install --force` 命令，强制安装模块。 - 升级或降级依赖的版本，让它们能够...
前端大厂最新面试题-vue.docx
06-06
2. 请介绍一下Vue的侦听器。 答：Vue的侦听器是指Vue实例的Watcher对象，它可以监听数据的变化并执行相应的回调函数。侦听器可以分为两种，一种是计算属性 watcher，另一种是渲染 watcher。 3. 什么是Vue CLI？ 答...
19.vuex和pinia有什么区别
07-25
2. 体积和性能：由于Vuex是一个成熟的库，并且拥有大量的功能和插件，所以它的体积相对较大。而Pinia是一个轻量级的库，仅包含核心的状态管理功能，因此在体积上更小。此外，由于Pinia采用了去中心化的架构，可以更...
vue3.5新增特性
yunbabac的博客
09-05 428
vue3.5
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 530
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
Vue CLI：初学者指南与深入理解
最新发布
x15514104477的博客
09-10 533
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 797
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
美术|基于java+vue的美术外包管理信息系统(源码+数据库+文档)
weixin_66413741的博客
09-10 574
游戏美术管理信息系统。该系统基于B/S即所谓浏览器/服务器模式，应用java技术，选择MySQL作为后台数据库。系统主要包括系统首页，个人中心，用户管理，公司管理，作品信息管理，作品订单管理，外包需求管理，外包应征管理，流程追踪管理，在线交流管理，在线回复管理，管理员管理，留言反馈，系统管理等功能模块。本文首先介绍了游戏美术外包管理信息技术发展背景与发展现状，然后遵循软件常规开发流程，首先针对系统选取适用的语言和开发平台，
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 1450
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
Chapter 11 脚手架Vue CLI使用步骤
2302_80253507的博客
09-06 707
Vue CLI 是 Vue.js 官方提供的一个全局命令工具，旨在帮助开发者快速创建和管理 Vue 项目。它为开发者提供了一个标准化的项目结构，并集成了 webpack 配置，使得开发过程更加高效和便利。
从`v-model`到显式绑定：掌控Vue组件中的数据流动20240910
Narutolxy的博客
09-10 334
v-model
vue axios 如何读取项目下的json文件
战族狼魂的博客
09-10 275
在 Vue 项目中，使用axios读取本地的 JSON 文件可以通过将 JSON 文件放置在public目录中，然后通过axios发起请求读取。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Suyuoa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值