Vuex状态管理方式

已于 2022-04-13 14:27:47 修改
阅读量388 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js
于 2022-04-12 16:49:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shiny0815/article/details/124104393
版权

在这里插入图片描述
backend 前端 frontend 后端
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
getters
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

mutations参数，有参数的情况，称为负载payload
在这里插入图片描述
在这里插入图片描述
参数不是一个的话，传对象的形式
在这里插入图片描述
在这里插入图片描述
提交，一个是通过commit，另外一个是type
这种情况下，count是一个对象，相当于payload
在这里插入图片描述
取值的时候，需要通过对象的方式取
在这里插入图片描述
删除，修改响应式
在这里插入图片描述
在这里插入图片描述
使用常量替代mutations事件类型
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
异步操作放到Actions
在这里插入图片描述
在这里插入图片描述
Actions传参
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
modules

① state
在这里插入图片描述
在这里插入图片描述

② mutations

方法名字不要和根模块的重复
在这里插入图片描述
在这里插入图片描述

③ 在modules里面，a内写getters
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
④ Actions
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
对象的解构
在这里插入图片描述
在这里插入图片描述
目录结构
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Shiny0815
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuexdemo状态管理
08-19
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在 Vue.js 的项目中，当应用程序变得复杂，组件之间需要共享...
详解vuex状态管理模式
12-12
Vuex是Vue.js应用的状态管理模式，它采用集中式存储管理应用程序的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在大型的Vue项目中，随着组件间的交互增加，状态管理变得复杂，Vuex提供了一...
详解Vuex管理登录状态
08-28
Vuex是一个状态管理器，它可以帮助我们管理应用程序的状态。Vuex的核心概念包括state、mutations、actions和getters。state是应用程序的状态，mutations是改变状态的方法，actions是驱动mutations的方法，getters是...
一篇看懂vuejs的状态管理神器 vuex状态管理模式
10-20
一篇看懂vuejs的状态管理神器，Vuex一个专为Vue.js应用程序开发的状态管理模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在Windows中为文件添加“可执行”权限（chmod +x 文件名 不起作用）
热门推荐
Shiny0815的博客
11-14 2万+
我们想为Windows中某文件添加可执行权限，原本想用chmod +x 文件名 命令，但发现不起作用， 于是，尝试下面方法 在demo.txt文件中，打开，第一行添加语句 #!/bin/bash 保存后，查看，已添加执行权限 ...
vue报错：dependencies were not found: * element-ui in ./src/main.js * element-ui/lib/theme-chalk/inde
Shiny0815的博客
06-28 9177
报错信息 These dependencies were not found: * element-ui in ./src/main.js * element-ui/lib/theme-chalk/index.css in ./src/main.js 解决方案 1、cmd进入命令行窗口，切入运行的项目文件夹下 2、输入 cnpm i element-ui -S(没有装淘宝镜像的使用 npm i element-ui -S) 再起项目，可以解决了 ...
Vue中message.split().reverse().join()函数用法
Shiny0815的博客
06-20 6625
1、split('') 把一个字符串分割成字符串数组 把数据拆分为一个数组,括号里的' '是把数据拆分为每个字符串 2、reverse() 颠倒数组中元素的顺序 只作用于数组，跟在split('')后才能起作用，在一个字符串后面不起作用，如message.reverse() 3、join('') 把数组中的所有元素放入一个字符串 所以，message.split('').reverse().join('') 意思是把字符串翻转重组成字符串 hello→olleh ...
绝对定位absolute、相对定位relative（脱离文档流）
Shiny0815的博客
11-26 5735
1、脱离文档流，：父元素高度不再包含文档流高度 position：absolute 子元素 position：relative 父元素， 子元素相对于祖先中的第一个relative定位，用...
CSS 横向导航栏（由竖向改成横向 float）
Shiny0815的博客
11-22 4648
float元素默认会收缩 div块级元素，默认从上往下流 如何让导航栏有竖排→横排 给每一块加上 float：left； 注意事项：以防出bug，在加了float块的父级，加上伪类：clearfix，具体写法如下： .clearfix::after{ content: ''; display: block; clear: both; } ...
Mac安装webpack报错gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1解决
Shiny0815的博客
08-08 3736
安装webpack ，报错提示 gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/cnpm/node_modules/node-gyp/lib/configure.js:345:16) gyp ERR! stack at ChildProcess.e
CSS图片布局 flex（竖着的几张图片改为一排）
Shiny0815的博客
02-20 3596
<style> .images{ display: flex; align-items: flex-start; //border: 1px solid red; 有可能边框包不住这几张图片，但如果窗口够大，也可以包住 //overflow: hidden; 如果写了，超出边框的部分会被隐藏 } </style> 布局有两种方式...
CSS 图片上下部与边框有间隙
Shiny0815的博客
11-26 2833
解决方法： img可能有默认样式，所以在CSS中，添加如下语句： img{ border:0; vertical-align:top; vertical-align:bottom; }
avue下拉框中属性可以显示，但不能选中
Shiny0815的博客
07-14 2254
1、avue下拉框中属性可以显示，但不能选中 追其原因，我对表单分组了，下拉框放在了group组内的column组里面，导致层数过多，产生死循环的bug 2、解决方法：取消分组，把所有的属性放到column属性里面，减少层级，下拉框可正常选择 ...
v-region 地址组件无法回显问题(选择地址保存后，打开编辑，发现刚才选择的地址【省市县乡】信息消失，信息不回显)
Shiny0815的博客
07-16 2017
(Avue) 1、问题 v-region 地址组件无法回显(选择地址保存后，打开编辑，发现刚才选择的地址【省市县乡】信息消失，信息不回显) 选择好省市县乡后，保存，再次编辑，发现如下： 2、解决方案：初始化 地址 参考资料：https://terryz.gitee.io/vue/#/region/demo ① 在前台修改 <avue-crud :data="data" :before-open="beforeOpen" > 在v-regio
选择日期保存后日期变成前一天（avue date）
Shiny0815的博客
07-16 1965
1、问题：选中日期，保存，日期变成前一天 { label: '生产日期', prop: 'esDate', type: 'date', }, 2、解决：（avue的官方文档） { label: '生产日期', prop: 'esDate', type: 'date', valueFormat: 'yyyy-MM-dd' }, 只需要加valueFormat.
Git Bash中npm配置，加速下载等作用
Shiny0815的博客
11-07 1738
每输入一行，回车，没有任何提示，说明操作成功 1.npm config set registry https://registry.npm.taobao.org 2.npm config set loglevel http 3. npm config set progress false 4.npm的配置被存储在 ~/.npmrc，可以随时改 ...
vue-router
Shiny0815的博客
04-02 1371
可以不写 import router from ‘./router/index.js’ 直接 import router from ‘./router’ 如果router是个文件夹，会自动查找目录下的index文件
axios网络模块封装
Shiny0815的博客
04-14 1351
网络测试 httpbin.org 发送普通的请求 get请求可以直接拼到URL后面 也可以将参数放到params对象中 axios发送并发请求 spread可以把值展开 数组的解构 对象的解构 axios配置信息相关 原始信息 defaults全局配置 使用全局的axios和对应的配置在进行网络请求 常见的配置选项 get请求—params post请求—data export default Axios //因为是default，所以import可以随意起名字 import
el-tree树回显删除某项，再次点开树形组件无变化，实际数据已改变
Shiny0815的博客
08-25 1103
初始化会根据default-checked-keys属性，默认已选项，直接勾选对应值，而不是通过check方法。页面有添加和删除已选选项的按钮，点击删除一个选项，再点添加，打开树形弹窗，发现弹窗被删除的选项还在。： 发现是添加的时候，调的方法是，el-tree树形组件里check方法，这是错误的。： 初始化打开弹窗时，
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 374
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值