<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写法的更多相关文章

  1. 使用 typescript ,提升 vue 项目的开发体验(1)

    此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言:对于我们而言,typescript 更像一个工具 官方指南 从 vue2.5 之后,vue 对 ts ...

  2. vuex(1.0版本写法)

    Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/  2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...

  3. Vue2.X的状态管理vuex记录

    记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method   -- ...

  4. vuex构建笔记本应用学习

    vuex:针对vue应用派生的专门管理应用state的工具,state可以理解为我们组件需要操作的data数据,都知道,vue构建spa应用的时候,随着组件规模的提升,各个子组件之间的通信如果采用子组 ...

  5. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...

  6. 简单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 ...

  7. vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)

    Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...

  8. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  9. vuex的简易入门

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...

随机推荐

  1. python基础学习Day14 内置函数 匿名函数

    一.内置函数里几个高频重要函数 (1)min\max函数的用法 以min函数的为例: min:返回可迭代对象的最小值(可加key,key为函数名,通过函数的规则,返回最小值). l1 =[(,),(, ...

  2. 清除 idea 缓存

    idea最好选择  付费版本 ,稳定一点~ 不要选择社区版 1.问题使用idea启动项目时,报如下错误:Intellij Error: Internal caches are corrupted or ...

  3. js获取url参数,直接获取url中文

    function GetQueryString(name)//name参数名称 { var reg = new RegExp("(^|&)"+ name +"=( ...

  4. mongodb突然出现一些特别奇葩的事

    mongo突然出现一些奇葩的事,如数据都还在,但某个命令敲下去了.啥东西都没有返回给我们. 往往这个时候特别的郁闷,找不出问题所在. 不用太担心,看看版本,多半是mongo的版本太老了,有些命令已经过 ...

  5. react input的几个坑

    [react input的几个坑] 1.input标签中设置value后,input进入controlled模式,valuechange由自动变为手动,导致input无法编辑.如: <input ...

  6. ssh X协议转发

    X协议的作用是远程登录Linux运行GUI界面 主机2开启ssh服务service ssh start 主机1 ssh连接主机2:ssh -X root@192.168.1.110 -p 53 然后可 ...

  7. Oracle中dbms_random.string 的用法

    转载:https://blog.csdn.net/simonchi/article/details/8657787 DBMS_RANDOM.STRING(var1,var2) 这个函数有两个参数 va ...

  8. NumPy Ndarray 对象

    NumPy Ndarray 对象 NumPy 最重要的一个特点是其 N 维数组对象 ndarray,它是一系列同类型数据的集合,以 0 下标为开始进行集合中元素的索引. ndarray 对象是用于存放 ...

  9. 数位dp poj1850

    题目链接:https://vjudge.net/problem/POJ-1850 这题我用的是数位dp,刚刚看了一下别人用排列组合,我脑子不行,想不出来. 在这题里面我把a看成1,其他的依次递增,如果 ...

  10. WebForm从客户端中检测到有潜在危险的Request.Form 值的处理办法

    从客户端中检测到有潜在危险的 Request.Form 值由于在.net中,Request时出现有HTML或Javascript等字符串时,系统会认为是危险性值.立马报错上面的错误. 如:在网页的Te ...