资讯专栏INFORMATION COLUMN

对vuex在项目中的使用

zzbo / 3462人阅读

摘要:前言在之前开发的过程中,对于项目中的状态的一些保存,大部分都是在或者中保存。的核心就是仓库包含应用中大部分的状态,与全局对象的有两点不同的状态时响应式的。改变中状态的唯一方法就是显式的提交。在组件中展示的状态。

前言
在之前开发的过程中,对于项目中的状态的一些保存,大部分都是
在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中对登录模块的封装:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113732.html

相关文章

  • vue开发微信商城项目总结之六--关于vuex的思考

    先对项目进行一下简单的介绍 vue开发微信商城项目总结之一–项目介绍 项目开发初期,由于项目比较着急上线,前端的框架在选型上比较仓促,只是因为vue学习成本较低,就选了它,没有什么别的原因, 之前看过angular2一段时间,又趁着周末看了两天vue,就仓促开发,所以埋下了很多坑,项目(项目目前没有对游客开放,是2B2C的模式)上线后,回头填坑,发现了很多问题,因为之前一直是基于Jquery模式的...

    PrototypeZ 评论0 收藏0
  • vuex项目中的使用

    摘要:前言在之前开发的过程中,对于项目中的状态的一些保存,大部分都是在或者中保存。的核心就是仓库包含应用中大部分的状态,与全局对象的有两点不同的状态时响应式的。改变中状态的唯一方法就是显式的提交。在组件中展示的状态。 前言 在之前开发的过程中,对于项目中的状态的一些保存,大部分都是 在window.localStorage、sessionStorage、或者cookie中保存。但是 两这之间...

    Jiavan 评论0 收藏0
  • Vuex — The core of Vue application

    摘要:个人看来,一个状态管理的应用,无论是使用,还是,最困难的部分是在的设计。中,并没有移除,而是改为用于触发。也是一个对象,用于注册,每个都是一个用于返回一部分的。接受一个数组或对象,根据相应的值将对应的绑定到组件上。 系列文章: Vue 2.0 升(cai)级(keng)之旅 Vuex — The core of Vue application (本文) 从单页应用(SPA)到服务器...

    Aldous 评论0 收藏0
  • vue 项目实战 (vue全家桶之--- vuex)

    摘要:官方文档对的解读是是一个专为应用程序开发的状态管理模式。而就是为了解决这样的问题,把组件的共享状态抽取出来,以一个全局单例模式管理。我们还可以传入参数传入一个对象可以修改中的状态,但是并不是说随随便便修改的比如说老规矩先安装 npm install vuex --save 在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解 首先 vuex 是什么? vuex...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

zzbo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<