vuex写法
<template>
<div class="hello">
<p>{{count}}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">Increment if odd</button>
<button @click="incrementAsync">Increment async</button>
</p>
</div>
</template> <script>
import {mapGetters,mapMutations,mapActions} from 'vuex'
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed:{
...mapGetters([
'count',
'evenOrOdd'
])
},
methods:{
increment(){
this.$store.dispatch('increment')
},
decrement(){
this.$store.dispatch('decrement')
},
incrementIfOdd(){
this.$store.dispatch('incrementIfOdd')
},
incrementAsync(){
this.$store.dispatch('incrementAsync')
}
}
}
</script>




vuex写法的更多相关文章
- 使用 typescript ,提升 vue 项目的开发体验(1)
此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言:对于我们而言,typescript 更像一个工具 官方指南 从 vue2.5 之后,vue 对 ts ...
- vuex(1.0版本写法)
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/ 2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...
- Vue2.X的状态管理vuex记录
记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method -- ...
- vuex构建笔记本应用学习
vuex:针对vue应用派生的专门管理应用state的工具,state可以理解为我们组件需要操作的data数据,都知道,vue构建spa应用的时候,随着组件规模的提升,各个子组件之间的通信如果采用子组 ...
- 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...
- 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)
github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...
- vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- vuex的简易入门
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
随机推荐
- 手工获取AWR报告
AWR(Automatic Workload Repository)报告常用于Oracle数据库性能分析.熟练解读AWR报告有助于快速分析Oracle性能问题.下面主要描述如何手工获取AWR报告. 操 ...
- secureCRT工具下载和安装
本文主要提供secureCRT软件下载和安装操作指导,节约软件查找和安装时间. 使用环境 32位Windows系统 软件下载 secureCRT软件和注册机下载:secureCRT 安装步骤和注意事项 ...
- LeetCode OJ 22. Generate Parentheses
题目 Given n pairs of parentheses, write a function to generate all combinations of well-formed parent ...
- Python学习笔记(一)简介总览
Class 1 一.简介 python:脚本语言.解释型语言 缩进是python语言很重要的一个标志 python3是未来的发展趋势 二.安装 windows: 1.下载安装包: https://ww ...
- Java学习02 (第一遍)
巩固基础: byte 1个字节 -128到127 = 2^(字节数*8-1),转变2进制,01111111(负127)到11111111(正127) ,存在正负零(00000000),正零保留,负零补 ...
- C# Excel转换为Json
demo:https://files.cnblogs.com/files/guxingy/Excel%E8%BD%AC%E6%8D%A2%E4%B8%BAJson%E5%AF%B9%E8%B1%A1. ...
- ubuntu16 安装openssh-server 一直安装不上Unable to correct problems, you have held broken packages
zengqi@zengqi:~$ sudo apt-get install openssh-server Reading package lists... DoneBuilding dependenc ...
- 2018面向对象程序设计(Java)第8周学习指导及要求
2018面向对象程序设计(Java)第8周学习指导及要求 (2018.10.18-2018.10.21) 学习目标 掌握接口定义方法: 掌握实现接口类的定义要求: 掌握实现了接口类的使用要求: 理 ...
- 解题10(LongestSubStrBetweenAB)
题目描述 查找两个字符串a,b中的最长公共子串.若有多个,输出在较短串中最先出现的那个. 输入描述: 输入两个字符串 输出描述: 返回重复出现的字符 示例1 输入 abcdefghijklmnop a ...
- UML中的关联,泛化,依赖,聚集,组合(转)
转自:http://blog.sina.com.cn/s/blog_5f8b45f20100dzjo.html 关联(association): 这是一种很常见的关系,这种关系在我们的生活中到处可见, ...