Vuex----Mutations
注意: 只能通过 mutations里的函数才能修改 state 中的数据
第一种方法:
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
state.count++
}
}
})
methods:{
addnum() {
this.$store.commit('add')
}
}
注意: mutations里不能包含异步操作。
如果组件之间需要传递参数
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state,step){
state.count +=step
}
}
})
methods:{
addnum() {
this.$store.commit('add',3)
}
}
import {mapMutations} from 'vuex'
mutations: {
add(state) {
state.count++
},
sub(state) {
state.count--
},
addN(state, step) {
state.count += step
},
subN(state, step) {
state.count -= step
}
},
import { mapState,mapMutations } from 'vuex'
computed:{
...mapState(['count'])
},
methods:{
...mapMutations(['sub','subN']),
decrement(){
this.sub()
},
decrementN(){
this.subN(5)
}
}
Vuex----Mutations的更多相关文章
- vuex 初体验
vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...
- vue跨组件通信的几种方法
http://www.tuicool.com/articles/jyM32mA 在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了 ...
- Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- 适用初学者:vue2.0构建单页应用最佳实战
参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...
- Vue常用开源项目汇总
前言:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
- vue各种插件汇总
https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...
- VUE插件大总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- Vue相关开源项目库汇总
https://github.com/opendigg/awesome-github-vue http://www.opendigg.com/tags/front-vue README.md 内容 U ...
随机推荐
- 操作系统实战45讲笔记- 05 CPU工作模式:程序执行的三种模式
实模式 实模式又称实地址模式,实,即真实,这个真实分为两个方面,一个方面是运行真实的指令,对指令的动作不作区分,直接执行指令的真实功能,另一方面是发往内存的地址是真实的,对任何地址不加限制地发往内存. ...
- pip python的包成功,但是import的时候报错
今天,一位同学线上反馈import python包失败了,同时附带两张图: 图1.报错代码 图2.报错提示 结合上面两个图片,我们发现这个同学import全部失败,初步怀疑该同学的本地环境上没有num ...
- lua-携程
function SayHey(mag) for i = 1 , 3 doprint(mag)coroutine.yield()end end --创建携程(协同) coFunc= coroutine ...
- SQL 查找是否”存在”,别再用 COUNT 了,真的很费时间!
根据某一条件从数据库表中查询 『有』与『没有』,只有两种状态,那为什么在写SQL的时候,还要SELECT count(*) 呢?无论是刚入道的程序员新星,还是精湛沙场多年的程序员老手,都是一如既往的c ...
- 小程序modal弹窗
[注意]css放的位置可能影响效果 参考a-level competitionFilterCover 1.容器:position: absolute; top: 100vh; animation: m ...
- p标签设置行数,超出部分用省略号隐藏
p { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; word-wrap: break-word; display ...
- C# Linq将DataTable中的某列转换成数组或者List
// 获取到的数据 DataTable picDt = GetPdmPoroductModelPictureData(productModelCode); // 将productCode列转数组 st ...
- Entity Framework Core 的 SQL 日志记录
日志配置通常由 appsettings {Environment} .json 文件的 Logging 部分提供 . 若要记录 SQL 语句,请将 "Microsoft.EntityFram ...
- Mysql数据库基础第二章:(十)联合查询
Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...
- 知识图谱demo net core + neo4j
知识图谱 基于neo4j数据库和.net core开发环境 Neo4j数据库的安装 安装neo4j数据库之前,需安装java的JDK文件,安装版本需与数据库保持一致,较新的neo4j数据库都需要至少j ...