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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
javascript第一课
Feb 27 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
js 函数性能比较方法
Aug 24 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修正代码
2011/05/09 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
2014过年倒计时示例
2014/01/31 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
解析Python编程中的包结构
2015/10/25 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python中requests小技巧
2017/05/10 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
同学聚会老师邀请函
2014/01/28 职场文书
新春联欢会主持词
2014/03/24 职场文书
酒后驾车标语
2014/06/30 职场文书
新农村建设汇报材料
2014/08/15 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
Python内置的数据类型及使用方法
2022/04/13 Python