[前端笔记037]vue2之vuex
前言
- 本笔记参考视频,尚硅谷:BV1Zy4y1K7SH p105 - p116
vuex简介和基本使用
- 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
- 什么时候使用Vuex
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
- vuex原理图:
- 下载
vuex
:npm i vuex
- 创建
src/store/index.js
:
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})
- 在
src/main.js
中创建 vm 时传入store
配置项:
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'Vue.config.productionTip = false
Vue.use(Vuex)new Vue({el:"#app",render: h => h(App),store
})
- 初始化数据
state
,配置actions
、mutations
,操作文件src/store/index.js
- 组件中读取vuex中的数据:
$store.state.sum
- 组件中修改vuex中的数据:
$store.dispatch('action中的方法名',数据)
或$store.commit('mutations中的方法名',数据)
- 备注:若没有网络请求或其他业务逻辑,组件中也可以越过
actions
,即不写dispatch
,直接编写commit
getters配置项
- 概念:当
state
中的数据需要经过加工后再使用时,可以使用getters
加工 - 在
store/index.js
中追加getters
配置 - 组件中读取数据:
$store.getters.bigSum
四个map方法的使用
- mapState方法:用于帮助我们映射state中的数据
computed: {//借助mapState生成计算属性:sum、school、subject(对象写法)...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成计算属性:sum、school、subject(数组写法)...mapState(['sum','school','subject']),
},
- mapGetters方法:用于帮助我们映射getters中的数据
computed: {//借助mapGetters生成计算属性:bigSum(对象写法)...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性:bigSum(数组写法)...mapGetters(['bigSum'])
- mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数
methods:{//靠mapActions生成:incrementOdd、incrementWait(对象形式)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成:incrementOdd、incrementWait(数组形式)...mapActions(['jiaOdd','jiaWait'])
}
mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数
methods:{//靠mapActions生成:increment、decrement(对象形式)...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成:JIA、JIAN(对象形式)...mapMutations(['JIA','JIAN']),
}
mapActions
与mapMutations
使用时,若需要传递参数,则需要在模板中绑定事件时传递好参数,否则参数是事件对象
模块化+命名空间
- 目的:让代码更好维护,让多种数据分类更加明确
- 修改store.js:
const countAbout = {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}
}const personAbout = {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {countAbout,personAbout}
})
- 开启命名空间后,组件中读取state数据:
//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取:
...mapState('countAbout',['sum','school','subject']),
- 开启命名空间后,组件中读取getters数据:
//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取:
...mapGetters('countAbout',['bigSum'])
- 开启命名空间后,组件中调用dispatch:
//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions:
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
- 开启命名空间后,组件中调用commit:
//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations:
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
[前端笔记037]vue2之vuex相关推荐
- vue2 + vue-router + vuex + iview 入门项目
简单的vue2 + vue-router + vuex + iview 入门项目,一个移动端平台的简易考试系统.灵感来源于近期工作项目中开发的一套考试平台系统.欢迎大家来issues指出错误共同进步. ...
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 参考文章: (1)移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 (2)https://www.cnblogs.com/zhaoda ...
- Web前端 笔记 (21-45)
Web前端 笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例 未加语义化标签 添加语义化标签 23.表格属性 1.常见表格属 ...
- Henry前端笔记之 Node及npm相关
Henry前端笔记之 npm入门相关 NodeJs 简介: 1.Nod简介与概述: 2.交互式运行环境:PEPL 3.Node.js模块和包 3.npm包管理工具 npm简介详见:https://dk ...
- 1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 出处:http://www ...
- [前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式
[前端笔记--HTML介绍] 4.HTML文本基础+超链接+高级文本格式 1.HTML文本基础 1.1标题和段落 1.2列表 1.2.1无序列表(unordered) 1.2.2有序列表(ordere ...
- [前端笔记——HTML 表格] 8.HTML 表格
[前端笔记--HTML 表格] 8.HTML 表格 1.HTML 表格基础 1.1 什么是表格? 1.2 创建表格: 2.HTML 表格高级特性和无障碍 2.1 使用`<caption>` ...
- 基于java的量化交易软件,用户可自行编写交易策略,用于期货、股票、外汇、炒币等多种交易场景,前端采用node14 + vue2
本项目仅属于技术分享,不构成任何交易建议.使用者自身在交易前,需要清楚其可能面对的交易风险与相关法律规定,并为自身行为负责! 完整代码下载地址:基于java的量化交易软件 这是一个用户可以自行编写交易 ...
- Henry前端笔记之 Date对象详解
Henry前端笔记之 Date对象详解 Date 对象 1 时间格式简介 2 Date.now 与 new Date().getTime() 的区别 3 Date对象详解 普通函数的用法 构造函数的用 ...
最新文章
- 图解:什么是Raft算法?
- SAP MM 史上最偷懒的盘点事务代码MI10
- 企业网络推广——企业网络推广中如何解决网站排名提升难题?
- 数据挖掘流程(六):写报告
- Maven超详细配置
- 给软件工程师、数据科学家和数据工程师的面试指南:该做与不该做
- 中国医美市场趋势洞察报告
- (计算机组成原理)第一章计算机系统概述-第二节:计算机硬件组成(存储器、运算器和控制器概述及计算机工作过程详解)
- 生成子集——位向量法
- Java_spring_定时执行任务
- 实验1-5 输出菱形图案 (5 分)
- 华为平板鸿蒙发布,华为将发布鸿蒙平板,你期待吗?
- AnimMontage(中文翻译)——UE4官方文档
- 基于RS485的Modbus协议
- Stata:如何生成天马行空的空间权重矩阵?
- MES系统是怎样实现生产调度的?
- Android开发之用户头像上传
- 【java当中摄像头调用保姆级别教程和在摄像头上实现滤镜效果】
- 云手机服务器解决方案
- 树莓派3 基于Ubuntu mate 16.04的调用中文输入法
热门文章
- 如何利用Fiddler抓取websocket数据包?
- 美国大学生数学建模matlab,2019MCM美国大学生数学建模竞赛A题赛后总结
- C#控制电脑注销、关机、重启
- 为什么常常会出现人+机人的现象?
- 怎么将pdf压缩?pdf文件如何压缩?
- 蜗牛爬树c语言程序函数,弹涂鱼上树吃蜗牛?鄂教版小学二年级课文遭吐槽
- html5游戏ztype源码,新款HTML5游戏Z-type考验玩家的打字速度
- python语音播报天气预报_python让生活更有趣--来个语音天气助手吧
- 如何通过 C# 有效的读取 INI 文件?
- spring data jpa使用详解(推荐)