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 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
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
处理单名多值表单的详解
2013/06/08 PHP
初识PHP中的Swoole
2016/04/05 PHP
javascript整除实现代码
2010/11/23 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
详解Node 定时器
2018/02/26 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python 异或加密字符串的实例
2018/10/14 Python
python实现月食效果实例代码
2019/06/18 Python
python 怎样进行内存管理
2020/11/10 Python
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
英文导游欢迎词
2014/01/11 职场文书
爱我中华演讲稿
2014/05/20 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
自查自纠工作总结
2014/10/15 职场文书
婚内分居协议书范文
2014/11/26 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python