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 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
js创建数组的简单方法
Jul 27 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
公众号SVG动画交互实战代码
May 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
zend framework配置操作数据库实例分析
2012/12/06 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
全球度假村:Club Med
2017/11/27 全球购物
实习自荐信
2013/10/13 职场文书
五年级科学教学反思
2014/02/05 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
管辖权异议上诉状
2015/05/23 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL