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 页面坐标相关知识整理
Jan 09 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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/06/17 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
Express.JS使用详解
2014/07/17 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
python对DICOM图像的读取方法详解
2017/07/17 Python
python http接口自动化脚本详解
2018/01/02 Python
Python工厂函数用法实例分析
2018/05/14 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
python中pickle模块浅析
2020/12/29 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
什么是事务?为什么需要事务?
2012/01/09 面试题
.NET概念性的面试题
2012/02/29 面试题
个人求职信范文分享
2014/01/06 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
学生个人评语大全
2015/01/04 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python