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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
JS变量提升原理与用法实例浅析
May 22 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
索尼ICF-SW100收音机评测
2021/03/02 无线电
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python中执行shell的两种方法总结
2017/01/10 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
python内存管理机制原理详解
2019/08/12 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
离婚协议书怎么写的
2014/12/14 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server