详解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 相关文章推荐
jquery multiSelect 多选下拉框
Jul 09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
解析js如何获取css样式
Dec 11 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
js实现购物车功能
Jun 12 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
vue代码分割的实现(codesplit)
Nov 13 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读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
Python计算已经过去多少个周末的方法
2015/07/25 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python 日志 logging模块详细解析
2020/03/31 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
企业文化理念标语
2014/06/10 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
社会实践活动总结格式
2015/05/11 职场文书
禁毒主题班会教案
2015/08/14 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
pytorch 实现多个Dataloader同时训练
2021/05/29 Python