深度解析vuex
1、什么是vuex?
vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(通俗一点的说Vuex就是存储数据的工具,类似于cookie、sessionStorage、localStorage)。
2、vuex和cookie、sessionStorage、localStorage的区别:
cookie、sessionStorage、localStorage是浏览器存储,每当页面刷新时数据依然存在(在过期时间内),而vuex在页面刷新时存储的数据会丢失。
3、vuex一般用于大型的SPA应用,否则最好不要使用vuex。
4、基本用法:
npm安装: npm install vuex --save
新建一个store文件夹,在该文件夹下新建一个index.js文件,机构目录入下图:
Vuex有以下几个选项:state、mutations、actions、getters、module
在该index.js文件里:
import Vue from 'vue'; //引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);
//新建一个store仓库, state 是存储数据的
const store=new Vuex.Store({
state:{
count:12
}
})
export default store;
4.1、读取数据: 在任何组件里可以通过$store.state.count来读取数据
<p>{{$store.state.count}}</p>
或者通过计算属性进行处理
<template>
<div class="hello">
<!--直接读取-->
<p>{{$store.state.count}}</p>
<!--通过计算属性获取-->
<p>{{count}}</p>
</div>
</template> <script>
export default {
data(){
return{
originData:'hello Vue'
}
},
computed:{
count(){
return this.$store.state.count;
}
} }
</script>
<style> </style>
结果如下图:
4.2、修改数据:
在组件内,来自store的数据只能读取,不能手动修改,改变store中数据的唯一途径就是显式的提交mutations。
在以下demo中实现加1和减一的效果:
const store=new Vuex.Store({
//选项一:state用来存储数据的
state:{
count:12
},
//选项二:mutations用来修改state中的数据的
mutations:{
increament(state){
console.log(state);
//以上打印的是 count:12 ,在这里可以获取到state中的count数据,所以可以在这里直接进行修改
state.count ++;
},
decrease(state){
console.log(state);
state.count --;
}
}
})
加1的结果:
减1的结果:
以上结果显式通过mutations已经成功的修改了state中的数据。
此外mutations还可以接受第二个参数:
修改之前的代码:
methods:{
//自定义一个num传给mutations
addOne(){
let num=10;
this.$store.commit('increament',num);
},
reduceOne(){
let num=5;
this.$store.commit('decrease',num);
}
}
mutations:{
increament(state,num){
console.log(num); //打印的是10
state.count+=num;
},
decrease(state,num){
console.log(num); //打印的是5
state.count-=num;
}
}
此时,加10和减5修改成功。
5、高级用法:
Vuex除了state、mutations外还有getters、actions、modules选项
5.1、getters:
“Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算”
demo:过滤出偶数
const store=new Vuex.Store({
//选项一:state用来存储数据的
state:{
count:[1,2,3,4,5,6,7,8,9,10]
},
//选项二:mutations用来修改state中的数据的
mutations:{
increament(state,num){
state.count+=num;
},
decrease(state,num){
state.count-=num;
}
},
//选项三:getters相当于计算属性
getters:{
filterData(state){
console.log(state)
//过滤出偶数
return state.count.filter(item=>item%2==0)
}
}
})
<template>
<div class="hello">
<!--通过计算属性获取-->
<p v-for="item in count">{{item}}</p>
</div>
</template> <script>
export default {
data(){
return{
originData:'hello Vue'
}
},
computed:{
count(){
return this.$store.getters.filterData;
}
}
}
</script>
<style> </style>
结果如下:
5.2、actions:异步操作state数据,一般用于后台请求数据。
mutation里尽量不要异步操作数据,如果异步操作数据了,组件在commit后数据不能立即改变,而且也不知道什么会改变,actions就是专门处理异步操作的。
demo:3s后原数据加20
<template>
<div class="hello">
异步数据:{{count}}
<button @click="asyncClick">异步处理</button>
</div>
</template> <script>
export default {
data(){
return{
originData:'hello Vue'
}
},
computed:{
list(){
return this.$store.getters.filterData;
},
count(){
return this.$store.state.count;
}
},
methods:{
asyncClick(){
//这里随便传过去一个数字20
this.$store.dispatch('asyncIncreament',20).then(()=>{
//修改成功的回调
console.log(this.$store.state.count); //
});
}
}
}
</script>
<style> </style>
store
const store=new Vuex.Store({
//选项一:state用来存储数据的
state:{
list:[1,2,3,4,5,6,7,8,9,10],
count:12,
},
//选项二:mutations用来修改state中的数据的
mutations:{
increament(state,num){
state.count+=num;
},
decrease(state,num){
state.count-=num;
}
},
//选项三:getters相当于计算属性
getters:{
filterData(state){
console.log(state)
//过滤出偶数
return state.list.filter(item=>item%2==0)
}
},
//选项四:actions实现异步操作
actions:{
asyncIncreament(content,num){
return new Promise(resolve=>{
setTimeout(()=>{
content.commit('increament',num);
resolve();
},3000)
})
}
}
})
export default store;
结果如下:
点击 “异步处理”按钮3s后页面的数据由原来的12变为32,修改成功后控制台打印结果32
5.3、module: 模块化处理
module是用来将store分割到不同的模块,当你的项目足够大时,store里的state、getters、mutations、actions会非常多,都放在mian.js里不是很友好,使用modules可以把它们写到不同的文件中。每个module拥有自己的state、getters、mutations、 actions,而且可以多层嵌套。
demo:
目录结构:
<template>
<div class="hello">
<button @click="asyncClick">异步处理</button>
<p> 模块A的数据:{{countOne}}</p>
<p> 模块B的数据:{{countTwo}}</p>
</div>
</template> <script>
export default {
data(){
return{
originData:'hello Vue'
}
},
computed:{
countOne(){
//获取模块a的state数据
return this.$store.state.a.countOne;
},
countTwo(){
//获取模块b的state数据
return this.$store.state.b.countTwo;
}
},
methods:{
asyncClick(){
//异步处理模块a的数据
this.$store.dispatch('asyncIncreamenta',30);
//异步处理模块b的数据
this.$store.dispatch('asyncIncreamentb',30);
}
}
}
</script>
模块a:
//模块A
export default{
//选项一:state用来存储数据的
state:{
list:[1,2,3,4,5,6,7,8,9,10],
countOne:12,
},
//选项二:mutations用来修改state中的数据的
mutations:{
increamentOne(state,num){
state.countOne+=num;
},
decreaseOne(state,num){
state.countOne-=num;
}
},
//选项三:getters相当于计算属性
getters:{
filterDataOne(countOne){
//过滤出偶数
return countOne.list.filter(item=>item%2==0)
}
},
//选项四:actions实现异步操作
actions:{
asyncIncreamenta(content,num){
return new Promise(resolve=>{
setTimeout(()=>{
content.commit('increamentOne',num);
resolve();
},1000)
})
}
}
}
模块b:
//模块B
export default{
//选项一:state用来存储数据的
state:{
list:[1,2,3,4,5,6,7,8,9,10],
countTwo:52,
},
//选项二:mutations用来修改state中的数据的
mutations:{
increament(state,num){
state.countTwo+=num;
},
decrease(state,num){
state.count-=num;
}
},
//选项三:getters相当于计算属性
getters:{
filterData(state){
//过滤出偶数
return state.list.filter(item=>item%2==0)
}
},
//选项四:actions实现异步操作
actions:{
asyncIncreamentb(content,num){
return new Promise(resolve=>{
setTimeout(()=>{
content.commit('increament',num);
resolve();
},1000)
})
}
}
}
store下的index.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import moduleA from './moduleA.js'
import moduleB from './moduleB.js'
const store=new Vuex.Store({
modules:{
a:moduleA,
b:moduleB
}
})
export default store;
点击“异步处理”按钮 1s后模块a和模块b的state的数据发生了改变。
6、mapState
、mapGetters、mapActions:
6.1、mapState
通过this.$store.state.count 获取store中的数据写法很长,所以为了简化写法可以使用mapState
进行操作,
<template>
<div class="hello">
<button @click="asyncClick">异步处理</button>
<p> 模块A的数据:{{countOne}}</p>
<p> 模块B的数据:{{countTwo}}</p>
<p> mapState获取模块A的数据:{{messageOne}}</p>
<p> mapState获取模块B的数据:{{messageTwo}}</p>
</div>
</template> <script>
//首先引入mapState,mapGetters,mapActions
import {mapState,mapGetters,mapActions} from 'vuex'
export default {
data(){
return{
originData:'hello Vue'
}
},
computed:{
countOne(){
//获取模块a的state数据
return this.$store.state.a.countOne;
},
countTwo(){
//获取模块b的state数据
return this.$store.state.b.countTwo;
},
//这里的3个点表示扩展运算符(ES6的知识)
...mapState({
messageOne: state => state.a.countOne,
/*
相当于:
messageOne(){
return state.a.countOne;
}
* */
messageTwo: state => state.b.countTwo, })
},
methods:{
asyncClick(){
//异步处理模块a的数据
this.$store.dispatch('asyncIncreamenta',30);
//异步处理模块b的数据
this.$store.dispatch('asyncIncreamentb',30);
}
}
}
</script>
<style> </style>
结果如下:
结果显示:通过mapState获取的数据和通过this.$store获取的数据一致。
6.2、mapGetters
<template>
<div class="hello">
<button @click="asyncClick">异步处理</button>
<p> 模块A的数据:{{countOne}}</p>
<p> 模块B的数据:{{countTwo}}</p>
<!--遍历模块a中的列表-->
<p>遍历模块a中的列表:</p>
<p v-for="item in filterDataOne">{{item}}</p>
</div>
</template> <script>
//首先引入mapState,mapGetters,mapActions
import {mapState,mapGetters,mapActions} from 'vuex'
export default {
data(){
return{
originData:'hello Vue'
}
},
computed:{
countOne(){
//获取模块a的state数据
return this.$store.state.a.countOne;
},
countTwo(){
//获取模块b的state数据
return this.$store.state.b.countTwo;
},
...mapGetters([
//模块a中 filterDataOne
'filterDataOne',
]),
},
methods:{
asyncClick(){
//异步处理模块a的数据
this.$store.dispatch('asyncIncreamenta',30);
//异步处理模块b的数据
this.$store.dispatch('asyncIncreamentb',30);
}
}
}
</script>
结果如下:
6.3、mapAction:
<template>
<div class="hello">
<!-- <button @click="asyncClick">异步处理</button>-->
<p> 模块A的数据:{{countOne}}</p>
<p> 模块B的数据:{{countTwo}}</p>
<p> mapState获取模块A的数据:{{messageOne}}</p>
<p> mapState获取模块B的数据:{{messageTwo}}</p>
<!--遍历模块a中的列表-->
<!--<p v-for="item in filterDataOne">{{item}}</p>-->
<button @click="asyncIncreamenta(100)">mapActions异步处理</button>
</div>
</template> <script>
//首先引入mapState,mapGetters,mapActions
import {mapState,mapGetters,mapActions} from 'vuex'
export default {
data(){
return{
originData:'hello Vue'
}
},
computed:{
countOne(){
//获取模块a的state数据
return this.$store.state.a.countOne;
},
countTwo(){
//获取模块b的state数据
return this.$store.state.b.countTwo;
},
//这里的3个点表示扩展运算符(ES6的知识)
...mapState({
messageOne: state => state.a.countOne,
/*
相当于:
messageOne(){
return state.a.countOne;
}
* */
messageTwo: state => state.b.countTwo, }),
...mapGetters([
//模块a中 filterDataOne
'filterDataOne',
]),
},
methods:{
...mapActions(['asyncIncreamenta']),
// asyncClick(){
// //异步处理模块a的数据
// this.$store.dispatch('asyncIncreamenta',30);
// //异步处理模块b的数据
// this.$store.dispatch('asyncIncreamentb',30);
// }
}
}
</script>
<style> </style>
点击“mapActions”按钮1后结果如下:
模块a的数据增加了100
深度解析vuex的更多相关文章
- [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析
[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...
- 第37课 深度解析QMap与QHash
1. QMap深度解析 (1)QMap是一个以升序键顺序存储键值对的数据结构 ①QMap原型为 class QMap<K, T>模板 ②QMap中的键值对根据Key进行了排序 ③QMap中 ...
- Deep Learning模型之:CNN卷积神经网络(一)深度解析CNN
http://m.blog.csdn.net/blog/wu010555688/24487301 本文整理了网上几位大牛的博客,详细地讲解了CNN的基础结构与核心思想,欢迎交流. [1]Deep le ...
- (转载)(收藏)OceanBase深度解析
一.OceanBase不需要高可靠服务器和高端存储 OceanBase是关系型数据库,包含内核+OceanBase云平台(OCP).与传统关系型数据库相比,最大的不同点, 是OceanBase是分布式 ...
- Kafka深度解析
本文转发自Jason’s Blog,原文链接 http://www.jasongj.com/2015/01/02/Kafka深度解析 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅 ...
- java内存分配和String类型的深度解析
[尊重原创文章出自:http://my.oschina.net/xiaohui249/blog/170013] 摘要 从整体上介绍java内存的概念.构成以及分配机制,在此基础上深度解析java中的S ...
- Unity加载模块深度解析(Shader)
作者:张鑫链接:https://zhuanlan.zhihu.com/p/21949663来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 接上一篇 加载模块深度解析(二 ...
- Unity加载模块深度解析(网格篇)
在上一篇 加载模块深度解析(一)中,我们重点讨论了纹理资源的加载性能.这次,我们再来为你揭开其他主流资源的加载效率. 这是侑虎科技第53篇原创文章,欢迎转发分享,未经作者授权请勿转载.同时如果您有任何 ...
- 深度解析Java8 – AbstractQueuedSynchronizer的实现分析(上)
本文首发在infoQ :www.infoq.com/cn/articles/jdk1.8-abstractqueuedsynchronizer 前言: Java中的FutureTask作为可异步执行任 ...
随机推荐
- [WCF] Restful 自定义宿主
IPersonRetriever: /* * 由SharpDevelop创建. * 用户: Administrator * 日期: 2017/6/2 * 时间: 22:13 * * 要改变这种模板请点 ...
- IOS 圆形进度条
// // CCProgressView.h // Demo // // Created by leao on 2017/8/7. // Copyright © 2017年 zaodao. All r ...
- G - Throw nails
来源hde4393 The annual school bicycle contest started. ZL is a student in this school. He is so boring ...
- ConfuserEx壳
前言: 这几天用Rolan的时候出现了点问题,然后发现了这个非常好用的工具居然只有几百k,打算逆向一下,然后发现了ConfuserEx壳 探索: Rolan是用C#写的,刚开始用EXEinfoPE打开 ...
- JAVA课程之简易课程登记
实现技术JSP+Servlet+MySQL 思想:首先前台用jsp获取数据,然后用Form表单传值给Servlet,Servlet操作MySQL,获取数据再通过jsp显示 1.jsp功能选择界面 &l ...
- ifcfg命令
ifcfg命令是一个bash脚本程序,用来设置Linux中的网络接口参数. 语法 ifcfg(参数) 参数 网络接口:指定要操作的网络接口: add/del:添加或删除网络接口上的地址: ip地址:指 ...
- Luogu 1012 - 拼数
题目链接:https://www.luogu.org/problemnew/show/P1012 题解: 首先,同等长度的数字,用字典序的方法比较大小,和直接比较数字大小是一样的. 其次,对于任意两个 ...
- Markdown编辑工具及命令
Markdown是一种可以使用普通文本编辑器编辑的标记语言,通过使用简单的编辑,可以使文本具有一定的格式. Typora是一款简介的Markerdown编辑器. 文本编辑语法: 标题: # 一阶标题 ...
- 树莓派3 之 安装Mysql服务
需求 在树莓派上 安装Mysql 服务,并开启远程访问 步骤 安装 mysql server $ sudo apt-get install mysql-server 我以为中间会让我提示输入 数据库r ...
- scala-协变和逆变
class GaoJi class ZhongJi extends GaoJi //协变=========================== class Card[+T] val cgaoji = ...