详解Vue中状态管理Vuex


Posted in Javascript onMay 11, 2017

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。

在vuex出现之前,vue里面的状态是属于‘单向数据流'。举个官网的例子:

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `<div>{{ count }} </div`,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

其中

  1. state是一个数据源
  2. view以声明的方式将state映射到视图
  3. actions 响应在view上的用户输入导致的状态变化

详解Vue中状态管理Vuex

但是解决不了 多个组件共享状态

所以vuex应运而生

详解Vue中状态管理Vuex

简单来说,就是共享的状态用state来存放,用mutations来操作state,但是需要用store.commit来主动式的操作mutations。

下面来单独介绍 state,getters,mutations,actions,modules

State

单一状态树

vuex使用单一状态树,那么就可以用一个对象来包含全部的应用层级状态。所以state就作为数据源。

如何在组件中获得vuex状态?

由于vuex的状态存储是响应式的,所以从store实例中读取状态的最简单方法就是使用计算属性来返回某个状态:

这个是store/state.js中声明的数据源

详解Vue中状态管理Vuex

这个是在组件中进行的引用

详解Vue中状态管理Vuex

不过需要注意的是,在组件中进行引用之前,需要先在入门文件中进行注入
即:

详解Vue中状态管理Vuex

如果不在根实例中注册store选项的话,那么需要在每一个使用state的组件中都要导入。

注册之后,子组件只需要this.$store即可调用vuex。

Getters

有时候我们需要从state中派生出一些状态,比如筛选一组列表,并且这个筛选后的数据是有其他组件要用的。那么我们就需要把这个结果进行包装,形成共享状态。

例如:

computed:{
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果说这个length是其他组件用的话,那么如何做呢?

Getter就这样应运而生了。

getters: {
  doneTodosCount: state => {
    return state.todos.filter(todo => todo.done).length
  }
}

Getter 会暴露为store.getters对象

所以很容易在任何组件中使用它:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

这是getters.js

详解Vue中状态管理Vuex

这是组件中的引用

详解Vue中状态管理Vuex

Mutations

更改Vuex的store中的状态的唯一方法就是提交mutations。

Vuex中的mutations就像一个事件:每个mutations都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数接受state作为第一个参数。

但是我们又不能直接来调用一个mutations的handler。要唤醒一个mutations handler,需要以相应的type来调用store.commit方法。

这个是在mutations.js中注册的一些的事件

详解Vue中状态管理Vuex

这是在组件中来触发这个事件

详解Vue中状态管理Vuex

当然,我们注意到,mutations中可以传递额外的参数,这个参数就叫做mutations的载荷。
在更多的情况下,载荷应该是一个对象。这样可以包含更多的字段。

但是mutations必须是同步函数。

那我们如何来异步的更新State呢?

答案是: Actions

Actions

Actions类似于 mutations 不同的是:

  1. Actions 提交的是mutations,而不是直接变更状态。
  2. Actions 可以包含任意异步操作。

这也就形成了 actions —— mutations —— state 的过程

Actions函数接受一个与store实例具有相同方法和属性的context对象,因此可以通过context.commit来提交一个mutations。但是如何触发呢?

答案: store.dispatch

详解Vue中状态管理Vuex

详解Vue中状态管理Vuex 

详解Vue中状态管理Vuex

Modules

使用单一状态树,导致应用的所有状态都集中到了一个很大的对象。所以,store对象容易变得臃肿。

为了解决这个问题, Vuex允许咱们把store进行一个功能拆分,分割成不同的模块(module)。每个模块都拥有自己的store,mutations,action,getters。

项目结构

├── index.html
├── main.js
├── api
│  └── ... # 抽取出API请求
├── components
│  ├── App.vue
│  └── ...
└── store
  ├── index.js     # 我们组装模块并导出 store 的地方
  ├── actions.js    # 根级别的 action
  ├── mutations.js   # 根级别的 mutation
  └── modules
    ├── cart.js    # 购物车模块
    └── products.js  # 产品模块

总结:

vuex可以用在单页面上的组件间共享状态。不适合用于跨页面的通信。

另外,对于一些跨页面的数据或者关键性的数据,可以通过localStorage,sessionStorage

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
js实现不重复导入的方法
Mar 02 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
JS简单生成随机数(随机密码)的方法
May 11 #Javascript
ionic实现下拉刷新载入数据功能
May 11 #Javascript
vue2的todolist入门小项目的详细解析
May 11 #Javascript
ionic实现底部分享功能
May 11 #Javascript
学习使用Bootstrap栅格系统
May 11 #Javascript
jQuery实现的简单在线计算器功能
May 11 #jQuery
学习使用Bootstrap页面排版样式
May 11 #Javascript
You might like
PHP个人网站架设连环讲(四)
2006/10/09 PHP
第十二节--类的自动加载
2006/11/16 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python中endswith()函数的基本使用
2015/04/07 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
利用Python如何生成便签图片详解
2018/07/09 Python
python打包成so文件过程解析
2019/09/28 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python关于反射的实例代码分享
2020/02/20 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
英语求职信范文
2014/05/23 职场文书
工作求职信
2014/07/04 职场文书
话题作文之呼唤
2019/12/18 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
javascript数组includes、reduce的基本使用
2021/07/02 Javascript