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应用框架.有了这个框架我们就可以在这个框架的基础上做起,这样就大大的提高了我们的开发效率和质量,为公司 ...
随机推荐
- SDUT OJ 多项式求和
多项式求和 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description 多项式描述 ...
- java的几种对象(PO,VO,DAO,BO,POJO,DTO)解释
一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...
- 1.1、Logistics Regression模型
1.线性可分VS线性不可分 对于一个分类问题,通常可以分为线性可分与线性不可分两种 .如果一个分类问题可以使用线性判别函数正确的分类,则称该问题为线性可分.如图所示为线性可分,否则为线性不可分: 下图 ...
- JAVA GET 和 POST 的区别
GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...
- 数据库,asp总结思维导图图片
- React组件Components的两种表示方式
函数式的表示: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Class式的表示: clas ...
- P4294 [WC2008]游览计划
传送门 斯坦纳树 给一个联通图,求 $k$ 个关键点联通的最小生成树权值 设 $f[o][i]$ 表示当前关键点选择状态为 $o$ ,以点 $i$ 为根的树的最小权值 初始 $f[1<<( ...
- leetcode 493 Reverse Pairs
题意:给定一个数组nums,求若 i<j and nums[i] > 2*nums[j] 的逆序对. Note: 数组的长度不会超过50,000 不愧是hard模式的题目,虽然已经知道可以 ...
- BZOJ - 1941 最远估价
题意:求给出的所有点的最远点减最近点的最小差值 KD树的最远估价和最近估价略微不同,直接找最远垂线,反正xjb改一下就过了 #include<bits/stdc++.h> #define ...
- Codeforces - 71E 状压DP
参考官方题解 #include<bits/stdc++.h> #define rep(i,j,k) for(register int i=j;i<=k;i++) #define rr ...