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 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
js定时器实例分享
Dec 20 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
Symfony生成二维码的方法
2016/02/04 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
javascript 动态添加表格行
2006/06/22 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
小学英语课后反思
2014/04/26 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
市政管理求职信范文
2014/05/07 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2014年居委会工作总结
2014/12/09 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
庆七一活动简报
2015/07/20 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python