vuex深入浅出
本文主要记录使用vuex的使用场景、重要组成部分和学习心得。
1、说在前面
学习vue有两周的时间了,目前已经对vue的基础使用比较熟悉了。但是一直对vuex的使用耿耿于怀,这么说是因为总是不太理解,还好经过实践和深入阅读官网后现在总算有了一定的掌握,这里做一下学习笔记和使用心得。
2、什么是vuex
vuex是vue的状态管理模式,它集中管理所有组件的共享状态,并且有自己的规则,比如怎么修改状态的值,怎么获取状态的值,是以一种可预测的方式来监听状态的改变。
3、为什么要使用vuex
我们知道,组件的通信(单向数据流)有两种:
- 1、父->子通信,通过
props
- 2、子->父通信,通过触发
$emit
的方法
那么,兄弟组件的通信呢?(当然简单的也可以通过子->父->子的方法传递,但是还是比较麻烦的),那么不相关的组件之间的通信呢?这就是vuex存在的主要意义。用官网上的话就是解决: - 1、多个视图依赖同一个状态
- 2、来自不同视图的行为变更同一个状态
4、vuex的组成
State
在state
中定义共享的状态值
//state.js
export default state = {
count: 0
}
获取state的值,需要放在计算属性中,保证每次state能够响应式的获取
computed:{
count(){
return this.$stores.state.count //获取值
}
}
这种获取方式是比较繁琐的,因此vuex给我们提供的对应的语法糖 mapState
,便于我们简洁性的获取值
import { mapState } from 'vuex'
export default{
computed:{
...mapState(['count']) //这样我们在组件就可以通过this.count获取对应的值了
}
}
Getter
state的派生状态值,可以理解成是store的计算属性,它一般是一个方法,方法接受一个参数state
//getter.js
export default {
getCount: state => state.count + 1
}
它的辅助函数是mapGetter
,一般也放在computed里
import { mapGetters } from 'vuex'
export default {
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters(['getCount'])
}
}
Mutation
vuex规定更改state的值唯一方法是提交 mutation,原因是为了能够明确的追踪状态的变化,它接受2个参数(state,newVal),第二个参数可以是字符串也可以是对象
//mutations.js
export default {
setCount(state,newVal){
state.count = newVal
}
}
必须通过commit
的方法触发调用它
this.$store.commit('setCount',20) //此时你把state中的count的值变成了20
它的辅助函数是mapMutations
,它一般放在methods中
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['setCount'])
}
}
在 Vuex 中,mutation 都是同步事务,不可写入异步操作
Action
Action 类似于 mutation,它主要用于:
- 批量的同步操作
- 异步操作
它接受一个store 实例具有相同方法和属性的context
对象,注意它提交的是 mutation,而不是直接变更状态
//actions.js
export default {
increment(context){
context.commit('setCount')
}
}
在实践中可以通过参数解构的方法简化代码
increment({commit}){
commit('setCount')
}
在组件中通过分发dispatch
的方法来触发action
this.$store.dispatch('increment')
这样做的目的是为了可以在action的内部执行异步操作(比如通过接口请求后才更改state的值)
increment({commit}){
setTimeout(()=>{
commit('setCount')
},1000)
}
也可以同步批量更改state中的值
increment({commit}){
commit('mutation1')
commit('mutation2')
commit('mutation3')
}
它的辅助函数是mapActions
,一般放在methods中
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions(['increment']) //将 this.increment() 映射为 this.$store.dispatch('increment')
}
}
action的返回接收,可以返回一个Promise
export default{
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
数据接受后处理
this.$store.dispatch('actionA').then(() => {
// ...
})
5、vuex的定义
我们一般会在src目录下建立一个名为store的文件夹专门放vuex的文件,目录里存放
state.js
:所有需要管理的状态getters.js
:所有需要更派生的状态mutations.js
:所有需要更改状态的方法actions.js
: 所有需要异步或批量同步更改状态的方法index.js
: 主入口文件
代码
import Vue from 'vue'
import VueX from 'vuex'
import States from './state'
import Getters from './getters'
import Mutations from './mutations'
import Actions from './actions'
Vue.use(Vuex)
export default nex Vuex.Store({
State,
Getters,
Mutations,
Actions
})
然后在根目录下的main.js
中全局引入
import store from './store'
new Vue({
el: '#app',
router,
store, //在这里
template: '<App/>',
components: {
App
}
})
6、总结
总的来说,当把所有的应用梳理一遍后vuex也没有那么的高深莫测,一切源于实践吧!实践比直接阅读或看文档更加的印象深刻。当然,还有一些应用官网上说的很明确,这里不在重述。比如:
- 模块化管理:适用于复杂业务
- 表单的处理 :v-model引发的坑
- 调式logger:可以在控制台显示跟踪state变化前后的值
当然,这里仅仅总结一些常规使用,更深的应用还有待于实践中发掘吧,加油!
vuex深入浅出的更多相关文章
- 5分钟让你掌握Vuex,深入浅出
5分钟让你掌握Vuex,深入浅出 一.什么是Vuex? 概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预 ...
- 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)
mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...
- 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)
阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...
- 一篇文章带你深入浅出Vuex
在写Vuex之前,我们先用一个简单的例子来实现一个小demo 大家都知道Vue的父传子用在很多场景,比如像这样: 父组件: <template> <div id="app& ...
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- 【深入浅出jQuery】源码浅析2--奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- vuex复习方案
这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.
- 深入浅出Struts2+Spring+Hibernate框架
一.深入浅出Struts2 什么是Struts2? struts2是一种基于MVC的轻量级的WEB应用框架.有了这个框架我们就可以在这个框架的基础上做起,这样就大大的提高了我们的开发效率和质量,为公司 ...
随机推荐
- 老男孩Day10作业:主机管理程序
一.作业需求: 1, 运行程序列出主机组或者主机列表 2,选择指定主机或主机组 3,选择主机或主机组传送文件(上传/下载) 4,充分使用多线程或多进程 5,不同主机的用户名,密码,端口可以不同 6,可 ...
- 设置placeholder的样式
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Fir ...
- 解压与压缩(把dataset转为string、、 )
/// <summary> /// 压缩 解压 /// </summary> public class ZipHelper { #region 压缩解缩 /// <sum ...
- svn学习笔记(二)
一.TortoiseSVN日常使用 1.1 浏览仓库 Repo-browser : 浏览仓库中资源信息 1.2 导入导出 Export :导出项目 ,和checkout区别 (checkout检出后文 ...
- python之IO目录处理
IO目录处理 在使用io常用函数之前,必须要在py文件头部import os.os是(Operation system)的缩写,意思就是系统操作. 1. 创建删除目录 #!/usr/bin/pytho ...
- 洛谷 P3239 [HNOI2015]亚瑟王(期望dp)
题面 luogu 题解 一道复杂的期望\(dp\) 思路来源:__stdcall 容易想到,只要把每张牌打出的概率算出来就可以求出\(ans\) 设\(fp[i]\)表示把第\(i\)张牌打出来的概率 ...
- [USACO12FEB]牛的IDCow IDs 一题多解(求二进制中有k个1 ,第n大的数)
题目: FJ给他的奶牛用二进制进行编号,每个编号恰好包含K 个"1" (1 <= K <= 10),且必须是1开头.FJ按升序编号,第一个编号是由K个"1&q ...
- 加、减、乘、除 高精度 string
#include<stdio.h> #include<string> #include<string.h> #include<iostream> usi ...
- day_01 python基础 基本数据类型 if条件
1. python简介 解释型,弱类型,高级开发语言2. 第一个python程序编写 1. 标点符号(英文) 2. 编码格式(utf-8)3.变量 把程序运行产生的中间值储存起来,方便后面 ...
- pg存储过程和sql语句块
展E宝项目使用的是postgresql数据库,批量发送红包需求,需要采用存储过程来初始化红包记录数据. 创建存储过程语句有固定的架子,如下 CREATE OR REPLACE FUNCTION pub ...