vuex vue简单使用知识点总结
时间:2019-08-30
本文章向大家介绍vuex vue简单使用知识点总结,主要包括vuex vue简单使用知识点总结使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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.***
以上就是本次介绍的全部知识点内容,感谢大家的学习和对脚本之家的支持。
- Architecture Pattern: Publish-subscribe Pattern
- OOAD-设计模式(三)之创建型设计模式(5种)
- ActiveMQ笔记(5):JMX监控
- session失效时间设置
- ActiveMQ笔记(4):搭建Broker集群(cluster)
- OOAD-设计模式(二)之GRASP模式与GOF设计模式概述
- 围棋之幸?围棋之悲?史上最年轻“五冠王”柯洁宣布再战AI
- spring 在Thread中注入@Resource失败,总为null的解决方案
- ActiveMQ笔记(3):基于Networks of Brokers的HA方案
- HTML5 Video Player概览
- 统计01:概述
- ActiveMQ笔记(2):基于ZooKeeper的HA方案
- ActiveMQ笔记(2):基于ZooKeeper的HA方案
- CSS几个竖直与水平居中盒子模型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用SQL查询Oracle数据库名和实例名
- Hadoop历史服务器配置详细步骤
- MySQL常见关键字优先级
- Linux进程管理命令及状态详解
- sqoop把hive数据导入mysql出现中文乱码
- Flink实现WordCount(实操详细步骤)
- 在客户端创建要素图层 (FeatureLayer)
- 11.深入k8s:kubelet工作原理及其初始化源码分析
- 关于搜索,你不知道的是.....
- oracle查询表前十条数据
- sql语句查oracle版本号
- 商业鬼才教你 模板方法模式
- 用SQL语句查看Oracle数据表的结构信息
- Oracle建表语法
- 剑指Offer第1题详解(附Java、Python实现代码)