vue 获取及修改store.js里的公共变量实例


Posted in Javascript onNovember 06, 2019

html

<input type='text' :value='num'>
<button @click='add'> + </botton>

js

data(){
 return{
  
 }
},
methods:{
  add(){
   this.$store.commit('add',1)
 }
},
computed:{
 num:function(){
  // 因为要做修改 num 的值 所以放在 计算属性里
  return this.$store.state.num
 }
}

store.js

state: {
  num:0
 },
 mutations: {
  add(state,shuzi){
   // shuzi是js里传来的值 1
   state.num+shuzi
  }
 },

原理:

更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。

以上这篇vue 获取及修改store.js里的公共变量实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
对vuex中getters计算过滤操作详解
Nov 06 #Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 #Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 #Javascript
vuex actions异步修改状态的实例详解
Nov 06 #Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 #Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 #Javascript
vuex存值与取值的实例
Nov 06 #Javascript
You might like
php中in_array函数用法分析
2014/11/15 PHP
PHP生成压缩文件实例
2015/02/07 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
html读出文本文件内容
2007/01/22 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python使用Matplotlib画条形图
2020/03/25 Python
python 为什么说eval要慎用
2019/03/26 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
辩论赛主持词
2014/03/18 职场文书
同学聚会策划方案
2014/06/06 职场文书
法制教育演讲稿
2014/09/10 职场文书
2015军训通讯稿大全
2015/07/18 职场文书