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中几种去掉字串左右空格的方法
Dec 25 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
JavaScript网页定位详解
Jan 13 Javascript
jquery获取节点名称
Apr 26 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 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
学习使用curl采集curl使用方法
2012/01/11 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
浅谈function(函数)中的动态参数
2017/04/30 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python如何使用unittest测试接口
2018/04/04 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python实现电子词典
2020/03/03 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python 使用office365邮箱的示例
2020/10/29 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
开放系统互连参考模型
2016/06/29 面试题
老师的检讨书
2014/02/23 职场文书
人力资源作业细则
2014/03/03 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
机械操作工岗位职责
2014/08/08 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python