vuex vue简单使用知识点总结


Posted in Javascript onAugust 29, 2019

vue概念:vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据;

配置vuex的步骤:

1、运行cnpm i vuex -S

2、导包

import Vuex from 'vuex'

3、将vuex注册到vue中

Vue.use(Vuex)

4、new Vuex.Store() 实例,得到一个 数据仓储对象

var store = new Vuex.Store({
 state: {
  // 大家可以把 state 想象成 组件中的 data ,专门用来存储数据的
  // 如果在 组件中,想要访问,store 中的数据,只能通过 this.$store.state.*** 来访问
  count: 0
 },
 mutations: {
  // 注意: 如果要操作 store 中的 state 值,只能通过 调用 mutations 提供的方法,才能操作对应的数据,不推荐直接操作 state 中的数据,因为 万一导致了数据的紊乱,不能快速定位到错误的原因,因为,每个组件都可能有操作数据的方法;
  increment(state) {
   state.count++
  },
  // 注意: 如果组件想要调用 mutations 中的方法,只能使用 this.$store.commit('方法名')
  // 这种 调用 mutations 方法的格式,和 this.$emit('父组件中方法名')
  subtract(state, obj) {
   // 注意: mutations 的 函数参数列表中,最多支持两个参数,其中,参数1: 是 state 状态; 参数2: 通过 commit 提交过来的参数;
   console.log(obj)
   state.count -= (obj.c + obj.d)
  }
 },
 getters: {
  // 注意:这里的 getters, 只负责 对外提供数据,不负责 修改数据,如果想要修改 state 中的数据,请 去找 mutations
  optCount: function (state) {
   return '当前最新的count值是:' + state.count
  }
  // 经过咱们回顾对比,发现 getters 中的方法, 和组件中的过滤器比较类似,因为 过滤器和 getters 都没有修改原数据, 都是把原数据做了一层包装,提供给了 调用者;
  // 其次, getters 也和 computed 比较像, 只要 state 中的数据发生变化了,那么,如果 getters 正好也引用了这个数据,那么 就会立即触发 getters 的重新求值;
 }
})

总结:

1. state中的数据,不能直接修改,如果想要修改,必须通过 mutations

2. 如果组件想要直接 从 state 上获取数据: 需要 this.$store.state.***

3. 如果 组件,想要修改数据,必须使用 mutations 提供的方法,需要通过 this.$store.commit('方法的名称', 唯一的一个参数)

4. 如果 store 中 state 上的数据, 在对外提供的时候,需要做一层包装,那么 ,推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.***

以上就是本次介绍的全部知识点内容,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
js 求时间差的实现代码
Apr 26 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
js中的this的指向问题详解
Aug 29 #Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 #Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 #Javascript
微信小程序实现购物车代码实例详解
Aug 29 #Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 #Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 #Javascript
Angular8路由守卫原理和使用方法
Aug 29 #Javascript
You might like
PHP自动生成月历代码
2006/10/09 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
对pandas中apply函数的用法详解
2018/04/10 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
北承题目(C++)
2012/05/16 面试题
给男朋友的道歉信
2014/01/12 职场文书
军神教学反思
2014/02/04 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
交通违章检讨书
2014/09/21 职场文书
农业项目投资意向书
2015/05/09 职场文书
未婚证明格式
2015/06/15 职场文书