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 相关文章推荐
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 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提供实现反射的方法和实例代码
2019/09/17 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
Angular-Touch库用法示例
2016/12/22 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python合并同类型excel表格的方法
2018/04/01 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python DataFrame 取差集实例
2019/01/30 Python
Python2与Python3的区别点整理
2019/12/12 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
阿拉伯书店:Jamalon
2019/07/24 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
师德标兵先进事迹材料
2014/12/19 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL