博客
关于我
06Vue3-Vuex的状态管理
阅读量:712 次
发布时间:2019-03-17

本文共 2964 字,大约阅读时间需要 9 分钟。

Vuex的状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

就是一个加强版的data!
在单页应用中会有一个data函数,管理当前应用的状态。
处理大量的需要在组件间传递的数据,直接定义一个全局的data属性保存就行了。
如果我们的页面比较简单,切记千万不要没事找事引入Vuex,我们使用Vuex是因为项目变得复杂之后,有很多数据需要在父组件、子组件和孙组件之间传递,处理起来很繁琐,于是就需要Vuex这样一个可以对这一部分数据进行统一管理的东西,也是响应式

什么情况需要使用Vuex管理状态在多个组件间共享?

大型项目中组件很多,多个组件中共用的数据
例如:用户的登录状态、用户名称、头像、地理位置信息等
例如:商品的收藏、购物车中的物品。
例如:传递组件之间传递层次太多、不相关组件、公用组件

Vuex有点类似cookie和session,session是用于服务器端共享,cookie是用于浏览器的,Vuex是用于前端组件间共享

文件目录

在这里插入图片描述
helloword子组件使用Home组件声明的变量,可采用之前学习的组件传递值的方法

Home组件

helloword子组件

效果在这里插入图片描述

若About组件想要使用Home组件的count,通过组件传递的方式也可实现,就是有点麻烦,需要传递给中介App组件,App组件再传递给About组件。
因此,在这里可采用Vuex,其配置文件在/store/index.js

import {    createStore } from 'vuex'export default createStore({     state: {       //任何地方都可使用这个状态管理    num: 0  },  mutations: {     },  actions: {     },  modules: {     }})

Home.vue

About.vue

效果

在这里插入图片描述
在这里插入图片描述
Vuex最好采用Matuations来修改状态,而不是通过组件的形式
index.js

import {    createStore } from 'vuex'export default createStore({     state: {       //任何地方都可使用这个状态管理    num: 0,    mnum: 0  },  mutations: {       //自动把state的参数传过来    sub(state) {         state.mnum--;    },    add(state) {         state.mnum++;    }  },  actions: {     },  modules: {     }})

Home.vue

About.vue

效果

在这里插入图片描述
在这里插入图片描述
Mutations带参数传递修改状态
index.js

import {    createStore } from 'vuex'export default createStore({     state: {       //任何地方都可使用这个状态管理    num: 0,    mnum: 0  },  mutations: {       //自动把state的参数传过来    sub(state) {         state.mnum--;    },    add(state) {         state.mnum++;    },    //接收一个参数    sub2(state,count) {         console.log(count);      state.mnum-=count;    },    add2(state,count) {         console.log(count);      state.mnum+=count;    },    //接收多个参数    sub3(state,payload) {         console.log(payload);      state.mnum-=(payload.count+payload.num);    },    add3(state,payload) {         console.log(payload);      state.mnum+=(payload.count+payload.num);    }  },  actions: {     },  modules: {     }})

Home.vue

效果

在这里插入图片描述

转载地址:http://ixuhz.baihongyu.com/

你可能感兴趣的文章
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>
mysqldump的一些用法
查看>>
mysqli
查看>>
MySQLIntegrityConstraintViolationException异常处理
查看>>
mysqlreport分析工具详解
查看>>
MySQLSyntaxErrorException: Unknown error 1146和SQLSyntaxErrorException: Unknown error 1146
查看>>
Mysql_Postgresql中_geometry数据操作_st_astext_GeomFromEWKT函数_在java中转换geometry的16进制数据---PostgreSQL工作笔记007
查看>>
mysql_real_connect 参数注意
查看>>
mysql_secure_installation初始化数据库报Access denied
查看>>
MySQL_西安11月销售昨日未上架的产品_20161212
查看>>
Mysql——深入浅出InnoDB底层原理
查看>>
MySQL“被动”性能优化汇总
查看>>
MySQL、HBase 和 Elasticsearch:特点与区别详解
查看>>
MySQL、Redis高频面试题汇总
查看>>
MYSQL、SQL Server、Oracle数据库排序空值null问题及其解决办法
查看>>
mysql一个字段为空时使用另一个字段排序
查看>>
MySQL一个表A中多个字段关联了表B的ID,如何关联查询?
查看>>
MYSQL一直显示正在启动
查看>>