对vuex在项目中的使用
前言
在之前开发的过程中,对于项目中的状态的一些保存,大部分都是 在window.localStorage、sessionStorage、或者cookie中保存。但是 两这之间有区别的: vuex存储在程序中的内存中,应用于组件之间的传值(响应式),当刷新页面时vuex中 存储的值会丢失,vuex中将state当做全局存储。当刷新页面之后,会初始化state。 对于cookie 和 session 的区别: 参考文档:https://www.cnblogs.com/pengc/p/8714475.html vuex的原理 - 状态管理模式:state应用的数据源、view以声明的方式将state映射到视图上、 action响应在view上的用户的输入导致的变化。(参考官方文档:https://vuex.vuejs.org/zh) vuex中当多个组件共享组件时,多个视图依赖同一个状态;来自不同视图的行为需要变更同 一个状态。因此把组件共享的状态提取出来,以一个全局单例模式管理。 vuex的核心就是store(仓库),包含应用中大部分的状态,与全局对象的有两点不同: 1、vuex的状态时响应式的。当vue组件从store中读取状态时,如果store中的 状态发生变化,那么相应的组件也会更新。 2、改变store中状态的唯一方法就是显式的提交(commit)mutation。这样我们可 以方便跟踪每一个状态的变化。 基本概念: state:用一个对象包含所有的应用层级状态,也就是把所有需要用到的状态在这里先声明一下。 在组件中展示state的状态。由于vuex的状态存储是响应式的,从store实例中读取状态量, 最简单的方法是在"计算属性中"返回某个状态:
下面给出在vuex中模块化使用的方法:
在src目录结构下新建store状态文件,里面包含store.js(包含多个store模块,登录模块、网路请求模块)、
types.js(使用常量作为函数名,方便以后维护)。
下面看看store.js中对登录模块的封装:
相关推荐
CSCCockroach 2020-09-15
lbPro0 2020-07-05
MrSunOcean 2020-06-21
lylwanan 2020-06-14
Callmesmallpure 2020-05-31
ShaLiWa 2020-05-25
墨龙吟 2020-04-24
MrSunOcean 2020-04-24
H女王范儿 2020-04-22
lbPro0 2020-04-16
ShaLiWa 2020-02-29
ShaLiWa 2020-01-17
MrSunOcean 2020-01-03
lbPro0 2020-01-01
H女王范儿 2019-12-29