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操作css属性
Dec 30 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 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
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
Javascript倒计时代码
2010/08/12 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
python读取word文档的方法
2015/05/09 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python实现键盘控制鼠标移动
2020/11/27 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python操作cfg配置文件方式
2019/12/22 Python
python游戏开发的五个案例分享
2020/03/09 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
西安当代医院管理研究院笔试题
2015/12/11 面试题
秋天的怀念教学反思
2014/04/28 职场文书
热门专业求职信
2014/05/24 职场文书
经营理念口号
2014/06/21 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
python脚本框架webpy的url映射详解
2021/11/20 Python
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers