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动画浅析
Aug 30 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
微信小程序上传图片实例
May 28 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
jQuery轮播图功能制作方法详解
Dec 03 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Django用户认证系统 组与权限解析
2019/08/02 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python和php哪个更适合写爬虫
2020/06/22 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
django和flask哪个值得研究学习
2020/07/31 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
建筑施工员岗位职责
2013/11/26 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
灵山大佛导游词
2015/02/04 职场文书