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 相关文章推荐
javascript 冒号 使用说明
Jun 06 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 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 管理系统程序中的后门
2009/08/05 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Python for循环中的陷阱详解
2018/07/13 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
金融专业个人求职信
2013/09/22 职场文书
毕业自我鉴定
2013/11/05 职场文书
研究生毕业鉴定
2014/01/29 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
项目投资建议书
2014/05/16 职场文书
现场活动策划方案
2014/08/22 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
上班迟到检讨书
2014/09/15 职场文书
五年级下册复习计划
2015/01/19 职场文书
酒会邀请函
2015/01/31 职场文书
预备党员表决心的话
2015/09/22 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
python实现过滤敏感词
2021/05/08 Python