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 基础问答三
Dec 03 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
javascript每日必学之继承
Feb 23 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
对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
农民C键的运用技巧
2020/03/04 星际争霸
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP实现图片压缩
2020/09/09 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
php实现简单四则运算器
2020/11/29 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
javascript实现日历效果
2019/06/17 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
跟老齐学Python之数据类型总结
2014/09/24 Python
Python持续监听文件变化代码实例
2020/07/22 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
中秋节超市促销方案
2014/01/30 职场文书
竞聘书模板
2014/03/31 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
三十年同学聚会感言
2015/07/30 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书