vue全家桶——vuex

article/2025/5/2 18:26:05

本文主要介绍vuex【状态管理模式】,在介绍vuex前,需要重点说下一些概念 

 vue最大的特点之一。数据驱动视图,可以吧数据理解成状态,视图-view可以理解成用户看到的页面,页面是动态变化的,而这个变化必须是有迹可循的,或是用户操作的(如输入,点击,滑动等),亦或是后台操作数据引起的,不管因为什么引起的,统称他们为状态变化了,他由前一个状态变到了后一个状态,页面也就应该随之变化,可得公式 ===》UI【页面输出】 = render【vue扮演的角色】(state)【输入-用户的,后台的】------最关键的是render,vue怎么知道state变化了,最终反映在了UI上呢?-----vue的变化侦测,js提供的Object.defineProperty方法(有个set和get后面在补充)

,在vue2中,框架是遵循单向数据流,而vue的特点是组件化开发,即单页面多应用:一个主页面,多个组件,这样做可以提高可维护性,组件化开发可以提高复用性,但是就数据传递而言,动不动就父传子,子传父,还有那啥事件总线,,我子组件数据改了,还得告诉父组件,让他改,虽然说我可以利用漏洞,就是那个js复杂对象的引用地址,我改了可以让原数据也跟着改。对了还有就是数组,能改变原数组的可以省点事,如pop,shift之流,但是其他的就费点劲,还得借助$set唉……

vuex的介绍:

前面说了,父传子,子传父,事件总线,费劲,少点还行,要是项目大,凉凉。

ok,我说说我是怎么理解vuex的吧!如果说父传子,就像是2d平面,跟个送快递一样,一级一级的传递,那么vuex就像3d,上帝视角,开飞机送快递,我直接能联系所有组件,并且数据是响应式的啊,有点双向数据绑定的感觉啊,牛逼。

 

详细的说说他的主要内容--基于vue脚手架安装的--省时省力啊

1.state 保存公共数据的  在组件中通过this.$store.state.name使用   有点像data

<template><div><h2>vuex之 state</h2><div><!-- //如果用脚手架不需要自己导入等操作,真香//可以再任何组件中使用//state的作用是保存公共数据,多组件共用问题1:模板中的可以不加this,其他地方用需要加this,模板底层自动加了this-->在下名叫:{{ $store.state.name }},来自北凉,今年:{{$store.state.age}},早已打遍天下无敌手</div><img :src="this.$store.state.url" alt="" /><button @click="btn">点击修改年龄</button><button @click="btn2">点击切换图片</button><span>{{ this.$store.getters.changeAge }}</span></div>
</template><script>
export default {created () {// 使用mutations进行修改数据,他是入口,只能通过它修改// 固定的方法this.$store.commit('newAge', 1000)console.log(this.$store.getters.changeAge)},methods: {btn () {// 实现的是点击按钮,改变年龄this.$store.commit('newAge', 0.5)},btn2 () {const lj = 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'this.$store.commit('newURL', lj)}}}
</script>

2.mutations 用来修改state里面的数据  而且,只有他可以直接修改state里面数据 有点像事件,接下来的几个都将附上两个代码片段,因为他们的使用都是注册和使用,基本都是在store中注册,在组件中使用。组件中使用:this.$store.commit('mutation名',要传入的数据)

//soute注册目录下的代码:
// 提供方法修改数据,他是和其他四个兄弟同级别存在mutations: {// 定义一个mutation来把age改成指定的值,newAge是要传入的数据,也可以不写,而第一个形参是必须的表示当前statesetAge: function(state, newAge) { //注意看他的格式,键值对形式console.log(newAge)state.age = newAge},

methods: {hClick() {// 调用mutation来修改年龄,20this.$store.commit('setAge', {newAge: 20, xxx: 100})//this.$store.commit('setAge', 20)}},
//需要提别注意的是:this.$store.commit('mutation名',要传入的数据)

3.它的作用是从已有功能数据项中派生出新的数据项,类似于computed (计算属性) 

getters:{nickName: function (state) {return state.age > 18 ? '大兄弟' : '小老弟'}},
//就是对state里面的数据进行一些运算,他不能直接修改state,需要借助mutation,调用它修改state的值
//在搞这些的时候,多试试,看看log日志打印些啥玩意,然后在应对
<template><div id="app"><NavBar /><div style="display: flex"><SideBar/><div style="flex: 1 1 auto; border:1px solid #ccc;">书目<p v-for="(book, idx) in $store.state.books.list" :key="idx">{{book.name}}, {{book.price}}</p><!-- 共计:{{$store.getters.books.totalPrice}} -->共计:{{ $store.getters['books/totalPrice'] }}</div></div></div>
</template>

4.actions 发送异步请求   调用:this.$store.dispatch('actions的名字', 参数)

new Vuex.store({// 省略其他...actions: {// context对象会自动传入,它与store示例具有相同的方法和context对象action的名字: function(context, 载荷) {// 1. 发异步请求, 请求数据// 2. commit调用mutation来修改/保存数据// context.commit('mutation名', 载荷)}}
})

 5.modules 拆分模板,把复杂的场景按模块来拆开   访问模块中的数据,要加上模块名  {{$store.state.模块名.数据项名}}     在使用modules时,建议都给加上namespaced(命名空间),不写的话不用加模块名

export default new Vuex.Store({// state: 用来保存所有的公共数据state: {},getters: {},mutations: {},actions: {},modules: {模块名1: {// 这个为true,则在使用mutations时,就必须要加上模块名namespaced: true, state: {},getters: {},mutations: {},actions: {},modules: {}},模块名2: {state: {},getters: {},mutations: {},actions: {},modules: {}}  }
})

Vuex-辅助函数mapState来使用公共数据

当访问某个数据项嵌套太深了,我们如何

用mapState把公共数据(vuex.store) 映射 到本组件内部的计算属性

  1. mapState是辅助函数,方便我们使用vuex中的数据;

  2. computed:{ ...mapState() } 这里的...是对象的展开运算符,整体来看是对象的合并。

格式:
// 1. 导入辅助函数mapState,它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'computed: {...mapState(['books'])
}
例子:
// 步骤
// 1. 导入辅助函数mapState,它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'// 2. 在computed中使用 ...mapState(['books'])
// const res = mapState(['books'])
// res的结果是一个对象: { books: function() {}}
// console.log('mapState', res)export default {computed: {c1 () {return 'c1'},// books: function() {}// ..res: 把res这个对象合并到computed对象中// ...res...mapState(['books'])}
}
</script>

如何使用全局state

直接使用: this.$store.state.;

xxxxxxxxxx computed: {   ...mapGetters('模块名', ['xxx']),   ...mapGetters('模块名',{'新名字': 'xxx'})}//map辅助函数:

参考:---头痛欲裂,抽空好好补上吧!
// 1. 导入vue
import Vue from 'vue'
// 2. 导入 vuex --- 学习的重点
import Vuex from 'vuex'
console.log(Vuex)
// Vue.use 框架中提供的api,用来以vue插件的方式来使用Vuex
// 类似有:Vue.use(vueRouter)
// Vue.use(对象), 对象中会有一个install方法
Vue.use(Vuex)
import axios from 'axios'
// export default: es6的默认导出。
// 这个被导出的对象在main.js中使用.// new Vuex.Store: 实例化一个对象,构造器是Vuex.Store
export default new Vuex.Store({// state: 用来保存所有的公共数据state: {nickName: 'tom',age: 18,url: 'https://img10.360buyimg.com/img/jfs/t1/179086/40/4900/81664/60a47d6bE2bf6455e/208f5820c156d4ab.gif'// url: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png',},// computed// getters的作用是:在state的基础上派生出新的数据项--类似于computedgetters: {gender (state) {return state.age > 18 ?  '男人' : '男孩'}},// mutations: 中文是:变化,异动。//   在vuex中,用它提供修改数据的方法。 //   数据不应该在组件内部直接修改,必须在组件内调用mutations来修改mutations: {changeNickName(state, newNickName) {state.nickName = newNickName},changeUrl(state, newUrl) {state.nickName = newNickName}},// modules:用来拆分复杂的业务modules: {book: {// 这个为true,则在使用mutations时,就必须要加上模块名namespaced: true, state: {list: [{name: 'js技术内幕(1)', price: 100}]},mutations: {addBook (state, {name, price}) {state.list.push({name, price})},setBooks(state, books) {state.list = books}},// 发ajax请求,从后端获取数据,再来去修改state中的数据actions: {getBooks (context, params) {console.log('getbooks的查询参数是', params)axios({url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',method: 'GET'}).then(res => {console.log(res)context.commit('setBooks', res.data.data)})}},},skills: {// 这个为false,则在使用mutations时,就必须不需要添加模块名namespaced: false, state: {list: ['手机贴膜']},mutations: {addSkill (state, newSkillName) {state.list.push(newSkillName)}}}}
})

 


http://chatgpt.dhexx.cn/article/DKo9Yxph.shtml

相关文章

博客园滑块验证码破解

极验最初的滑块验证码是两张图&#xff0c;首先出现的是原图&#xff0c;点一下出现凹槽&#xff0c;然后拖动滑块进去&#xff0c;注意拖拽速度就可以破解成功。 原理&#xff1a; 分别遍历扫描原图和有凹槽的图片像素&#xff0c;进行对比&#xff0c;像素不一致的位置就是凹…

尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P001-050]

视频链接&#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50&#xff1a;当前页面。 P51-100&#xff1a;尚硅谷Vue2.0Vue3.0全套教程视频笔记 代码 [P051-100]_小白桶子的博客-CSDN博客 P101-135&#xff1a;尚硅谷Vue2.0Vue3.0全套教程视…

【Vue】Mock.js的使用教程,入门级(附代码和案例)

Mock.js的使用&#xff08;附代码和案例&#xff09; 1、什么是mockjs 生成随机数据&#xff0c;拦截Ajax请求 了解一项技术&#xff0c;官网当然要知道 Mock.js 官网 2、程序 前端&#xff1a;访问后端接口&#xff0c;展示数据后端&#xff1a;后端负责业务逻辑&#xff0c…

YDOOK:vue3.0: vue-cli4.5: 引入 Element PLUS 的正确方法 Vue-cli4.5 引入 element+ plus

YDOOK&#xff1a;vue3.0: vue-cli4.5: 引入 Element PLUS 的正确方法 Vue-cli4.5 引入 element plus 1. 官网的指导安装使用方式尚未更新&#xff0c;显示的是&#xff1a; 2. 如果使用的是 npm 安装, 输入的代码为&#xff1a; npm install element-plus --save大陆建议使用…

使用Xposed对软件进行破解

入门 去AS里面新建一个NoActivity项目&#xff0c;最好把minimum版本调小 <!-- 加载Xposed模块--><meta-dataandroid:name"xposedmodule"android:value"true" /> <!-- 模块描述--><meta-dataandroid:name"xpose…

破解root密码精简版

破解root密码精简版&#xff1a; 1、重启虚拟机 2、在linux16末尾加上 rd.break,ctrlx执行 3、mount -o remount,rw /sysroot 把根以读写的方式挂载 挂在系统的根sysroot 4、chroot /sysroot 5、passwd root 6、输入新密码&#xff1a; 7、确认密码 8、touch /.autorelabel 标…

【word论文排版教程4】样式的应用

【word论文排版教程4】样式的应用 在使用样式处选择相应样式&#xff0c;同样可以使用之前设置的快捷键 标题比较长&#xff0c;使用软回车进行换行

【word论文排版教程2】论文章节安排及分节

【word论文排版教程2】论文章节安排及分节 论文章节可分为如下8个章节&#xff1a; 封面 中文摘要 英文摘要 目录 正文 参考文献 附录 致谢 输入封面&#xff0c;添加分解符 添加分解符效果 同样方法为其它章节添加分解符。

【word论文排版教程1】页面设置

【word论文排版教程1】页面设置 页面设置要求如下&#xff1a; 页面格式&#xff1a;纸张A4&#xff0c;上2.6cm&#xff0c;下2.6cm&#xff0c;左2.5cm&#xff0c;右2cm&#xff0c;装订线位置左侧&#xff0c;装订线0cm&#xff0c;无文档网格 页面布局->页面设置

毕业必备!推荐收藏的学位论文排版教程(word完整版)

本文将介绍学位论文的页面布局&#xff0c;标题格式&#xff0c;文档生成列表&#xff0c;插入公式&#xff0c;页眉页脚&#xff0c;生成目录、表格和图片的交叉引用、插入参考文献、英语翻译校对等内容和技巧&#xff0c;学习内容偏多&#xff0c;同学们可以先收藏下来&#…

毕业论文word文档排版教程(动图的方式演示,针对wps)

很久之前写好的文章&#xff0c;不知不觉毕业了那么久了 目录 1 常用快捷键 2 显示全部格式标记 3 因有手动换行符无法实现首行缩进 4 利用表格制作矩阵 5 因有英文(代码)和中文而导致空隙过大 6 设置页码和目录 xx 参考文献自动编号并更新文章中的序号 xxx 页…

Latex基本使用:论文排版

文章目录 前言一、参考文献引用二、插入符号1.插入希腊字母2.插入符号 三、插入公式三、插入图片总结 前言 记录使用Latex排版论文的方法。 一、参考文献引用 引用参考文献使用的是bib文件&#xff0c;首先在tex文件所在目录下新建txt文件&#xff0c;修改后缀为bib。 在谷歌…

texlive2020 + vscode 论文排版教程

这是我准备公开的第二篇技术博客&#xff0c;之前也写过一些简单的&#xff08;拿不出手的&#xff09;博文&#xff0c;但一直没信心公开&#xff0c;不过最后觉得也没啥&#xff0c;大家可以交流嘛&#xff0c;万一你写的有错&#xff0c;有好心人看见了指出的话那也是极好的…

毕业论文排版教程(word)桂林电子科技大学

摘要&#xff1a;满心欢喜地给导数发去初稿&#xff0c;换来了一句“格式乱起八糟”&#xff0c;你是否还在为论文排版而苦不堪言&#xff0c;认真看完这份教程&#xff0c;让你轻松搞定毕业论文排版。 毕业论文排版教程&#xff08;word&#xff09;桂林电子科技大学 样式图片…

【word论文排版教程3】制作样式和列表

【word论文排版教程3】制作样式和列表 一级标题&#xff1a;黑体小二&#xff0c;居中&#xff0c;行距“固定值:20磅”&#xff0c;段前、段后均1行。 二级标题&#xff1a;黑体小三&#xff0c;无缩进&#xff0c;行距“固定值:20磅”&#xff0c;段前、段后均0.5行。 三级及…

Word论文排版教程

设置样式 要求&#xff1a; 以下以修改“大标题”为例&#xff0c;其他以此类推 1、大标题 再点击右下角的“段落” 2、标题4… 我们发现word默认只显示了三级标题的样式&#xff0c;如果我们还要更多的样式&#xff1a; &#xff08;选择“所有样式”即可&#xff09; …

论文排版教程

论文排版教程 Tips 一、 常用键 Delete 向后删除 CtrlEnter插入一个分页符 Alt 插入公式 二、 单位可以直接输入 三、定制功能区提升效率 论文正题 一、信息栏制作方法 二、目录制作方法 三、页眉页脚设置 插入分节符 分节符的作用&#xff1a;使得前后两部分在语义上…

Word排版小技巧 | 快速论文排版

文章目录 1.设置中英文字体不同2.设置文档样式3.设置页边距4.设置页眉/页脚/页码添加页眉和页码页眉下边有横线设置从某一页开始显示页码 5.设置自动保存时间&#xff0c;防止死机丢文件6.批量删除空格、空行7. 竖向删除内容8. 图片批量修改大小9. 图片批量居中10.一键拆分表格…

吐血推荐收藏的学位论文排版教程(完整版)

目录 01.保存的高级选项设置 02.纸张设置为A4纸大小 03.设置页边距和装订线距离 04.度量衡的设置 05.创建“论文正文”样式 06.修改论文正文样式 07.设置并修改标题样式 08.给中英文摘要、附录、等大标题套用样式 09.两个Word文档之间进行并排查看 12.一键生成多级列…

2019年下半年软件工程领域各大会议投稿时间(包含会议信息介绍及CCF推荐会议最新目录)

文章目录 前言1 CCF会议最新排名1.1 基本信息1.2 软件工程领域相关会议A类B类C类 2 下半年软工会议投稿时间&#xff08;A类会议&#xff09;2.1 PLDI2.2 POPL2.3 FSE/ESEC2.4 OOPSLA2.5 ASE2.6 ICSE2.7 ISSTA 3 下半年软工会议投稿时间&#xff08;B类会议&#xff09;3.1 ICS…