Vuex中实现数据状态查询与更改


Posted in Javascript onNovember 08, 2019

在vuex进行vue注入后即可在任一子组件中通过this.$store来访问vuex

import store from './store' 
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

1.在子组件中通过this.$store.state.变量名在子组件中访问state中某个变量的值

this.tabbarActive = this.$store.state.tabbarActive //这里的tabbarActive为存储在vuex中state的变量名

2.在子组件中通过this.$store.commit(‘方法名',参数)来进行对vuex中的数据状态进行更新/插入

1)由于vuex中store的改变唯一的途径是提交mutation,通过调用实例化后的vuex,mutations中相对应的方法可以实现对状态值的改变,其中payload可以为参数对象,或者单个值,state参数在调用时默认为第一个参数可以不传,但是在mutations中申明该函数时必须传入state

mutations: {
  changeTarBar (state,payload) {
   state.tabbarActive = payload
  }
 }

?在子组件中更新store中的状态

this.$store.commit("changeTarBar",idx)//其中idx为传入的参数

?或者这种写法,此时的payload则为一个参数对象,可以通过payload.idx获得子组件传入的参数值

this.$store.commit({
  type:'changeTarBar',//type对应方法名
  idx,
 })

以上这篇Vuex中实现数据状态查询与更改就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
javascript回调函数详解
Feb 06 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 #Javascript
vue.js的简单自动求和计算实例
Nov 08 #Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 #Javascript
Vue搭建后台系统需要注意的问题
Nov 08 #Javascript
vue视频播放暂停代码
Nov 08 #Javascript
vue-dplayer 视频播放器实例代码
Nov 08 #Javascript
BootstrapValidator实现表单验证功能
Nov 08 #Javascript
You might like
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
python字典多条件排序方法实例
2014/06/30 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
python初步实现word2vec操作
2020/06/09 Python
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
政治学求职信
2014/06/03 职场文书
司法助理专业自荐书
2014/06/13 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
学术研讨会主持词
2015/07/04 职场文书
家长会感言
2015/08/01 职场文书
2016年安全月活动总结
2016/04/06 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server