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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
关于vue-router的那些事儿
May 23 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
对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 中文和编码判断代码
2010/05/16 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
理解JavaScript中的事件
2006/09/23 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
python字符类型的一些方法小结
2016/05/16 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
办公室岗位职责范本
2015/04/11 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL