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 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
在实例中重学JavaScript事件循环
Dec 03 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 get_meta_tags()函数
2014/05/12 PHP
初识php MVC
2014/09/10 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
PDO::prepare讲解
2019/01/29 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
什么时候需要进行强制类型转换
2016/09/03 面试题
财务部出纳岗位职责
2013/12/22 职场文书
党员承诺践诺书
2014/05/20 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
七一表彰大会简报
2015/07/20 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server