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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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排序算法类实例
2015/06/17 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
python在不同层级目录import模块的方法
2016/01/31 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
解读python logging模块的使用方法
2018/04/17 Python
Python类装饰器实现方法详解
2018/12/21 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
专科毕业生就业推荐信
2013/11/01 职场文书
酒店总经理工作职责
2013/12/13 职场文书
小学敬老月活动方案
2014/02/11 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
本科应届生求职信
2014/08/05 职场文书
法定代表人证明书
2014/11/28 职场文书
国庆节慰问信
2015/02/15 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL