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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
分享Javascript实用方法二
Dec 13 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
JS实现商品筛选功能
Aug 19 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 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
几个学习PHP的网址
2006/11/25 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
destoon常用的安全设置概述
2014/06/21 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php socket通信简单实现
2016/11/18 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python中获取对象信息的方法
2015/04/27 Python
Python变量作用范围实例分析
2015/07/07 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
20行python代码实现人脸识别
2019/05/05 Python
python之生产者消费者模型实现详解
2019/07/27 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
精灵市场:Pixie Market
2019/06/18 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
结婚典礼证婚词
2014/01/11 职场文书
程序员求职信
2014/04/16 职场文书
淘宝活动总结范文
2014/06/26 职场文书
毕业生对母校寄语
2015/02/26 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python