对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中对登录模块的封装：

对vuex在项目中的使用相关推荐

Vuex在项目中使用
案例1: 案例2: Token 是用户登录成功之后服务端返回的一个身份令牌,在项目中的多个业务中需要使用到校验页面的访问权限访问需要授权的 API 接口 - 但是我们只有在第一次用户登录成功之后才 ...
vue项目中返回按钮案例(用vuex控制返回按钮的显示或者隐藏)
在vue的项目中避免不了会有返回按钮的出现,恰当的页面,返回按钮的显示或者隐藏,我是用vuex来管理的, 好了,直接上代码吧 <el-button type="primary" ...
在vue项目中引入vuex(全局状态管理器)
目录 Vuex是什么? State Getter Mutation Action Module 项目结构 Vuex是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式存储管 ...
vue项目中解决浏览器刷新vuex数据消失问题
vue项目中解决浏览器刷新vuex数据消失问题说明 vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中. 操作打开App.vue,在created ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
层次和约束：项目中使用vuex的3条优化方案
问题描述使用vuex的store的过程中,发现了一些不是很优雅的地方: store层module太多,找state.getter.mutation.action对应的module比较慢. 组件里面m ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue项目中keep-alive的使用，从详情页返回列表时保存浏览位置
背景描述: 最近在做移动端前端项目中,需要实现以下场景: 1.在页面查询列表,进入详情页时,返回需要页面返回到上次浏览的位置 2.由于查询列表获取的数据可能会短时间改变,如果前端长时间缓存数据,并不符 ...
Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件因为Typescript默认不能识别. ...

对vuex在项目中的使用

前言

对vuex在项目中的使用相关推荐

最新文章

热门文章