<template>
<div>
{{count}}
<button @click="handleIncrease">+5</button>
<button @click="handleDecrease">-5</button>
<button @click="handleRouter">跳转到 HelloWorld3</button>
<button @click="showRouter">展示路由</button>
</div>
</template> <script>
import { mapState } from 'vuex'
export default {
name: 'HelloWorld2',
computed: {
// count(){
// return this.$store.state.count;
// },
//与上面效果一样
...mapState({
count: state =>
state.count
})

},
methods: {
handleIncrease() {
this.$store.commit('increase', 5);
},
handleDecrease() {
this.$store.commit('decrease', 5);
},
handleAsyncIncrease() {
this.$store.dispatch('asyncIncrease');
},
handleRouter() {
this.$router.push('/HelloWorld3');
},
showRouter() {
console.log(this.$router);
console.log(this.$router.push);
}
}
};
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>
<template><div>{{count}}<button @click="handleIncrease">+5</button><button @click="handleDecrease">-5</button><button @click="handleRouter">跳转到 HelloWorld3</button><button @click="showRouter">展示路由</button></div></template>
<script>import { mapState } from 'vuex'export default {name: 'HelloWorld2',computed: {//count(){//return this.$store.state.count;//},//与上面效果一样...mapState({count: state => state.count})},methods: {handleIncrease() {this.$store.commit('increase', 5);},handleDecrease() {this.$store.commit('decrease', 5);},handleAsyncIncrease() {this.$store.dispatch('asyncIncrease');},handleRouter() {this.$router.push('/HelloWorld3');},showRouter() {console.log(this.$router);console.log(this.$router.push);}}};</script>
<!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>
</style>

vuex mapState使用的更多相关文章

  1. vuex mapState、mapGetters、mapActions、mapMutations的使用

    例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...

  2. Vuex mapState的基本使用

    mapState把Store中的state映射到组件中的计算属性 Store文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ...

  3. Vue 状态管理之vuex && {mapState,mapGetters}

    1 # 一.理解vuex 2 1.概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读写),也是一种组件间通信的方式,且适用于任意组件间 ...

  4. vuex 中关于 mapState 的作用

    辅助函数 Vuex 除了提供我们 Store 对象外,还对外提供了一系列的辅助函数,方便我们在代码中使用 Vuex,提供了操作 store 的各种属性的一系列语法糖,下面我们来一起看一下: mapSt ...

  5. [转] Vuex入门(2)—— state,mapState,...mapState对象展开符详解

    1.state  state是什么? 定义:state(vuex) ≍ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 ...

  6. vuex中mapState、mapMutations、mapAction的理解

    当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性. // 在单独构建的版本中辅助函数为 Vue ...

  7. 初识vuex

    1.简介 vuex是 vue官方推荐的一个状态管理器.当我们遇到很多状态改变时,组件之间的通信就会变得复杂,这时候vuex的强大就展现出来. 我们从vuex的原理以及vuex的api两个部分介绍vue ...

  8. vuex 使用文档

    安装 直接下载CDN 引用 <script src="/path/to/vue.js"></script> <script src="/pa ...

  9. Vue状态管理vuex

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

随机推荐

  1. kvm虚拟化实践

    .环境初始化 [root@localhost ~]# hostnamectl set-hostname kvm-node1 [root@kvm-node1 ~]# sed -i '/SELINUX=/ ...

  2. Java.io.File中的delete()方法和deleteOnExit()方法的区别

    1.delete()方法:             当调用delete()方法时,直接删除文件,不管该文件是否存在,一经调用立即执行: 2.deleteOnExit()方法:            当 ...

  3. 【02】react 之 jsx

    React与ReactDOM是react中核心对象,React为核心功能,ReactDOM提供对DOM的操作,以前的老版本中只有React没有ReactDOM,新版本中分离出ReactDOM提供两种渲 ...

  4. 【HDOJ5981】Guess the number(DP)

    题意:A和B玩一个游戏:A在[L,R]之间随机选取一个数X,之后由B来猜这个数, 如果猜的数比X小,则A就告诉B你猜的数小了, 如果猜的数等于X则游戏结束, 如果猜的数大于X,则在这之后A只会回答B是 ...

  5. boost::thread编程-线程中断(转)

    原文转自 http://blog.csdn.net/anda0109/article/details/41943691 thread的成员函数interrupt()允许正在执行的线程被中断,被中断的线 ...

  6. python之wxPython菜单使用详解

    import wx APP_EXIT=1 #定义一个控件ID class Example(wx.Frame): def __init__(self, parent, id, title): super ...

  7. 关于apache 虚拟主机配置访问403的问题

     <Directory />    Options FollowSymLinks    Order allow,deny    Allow from all</Directory&g ...

  8. C++ 找不到方法标识符

    其实原因是这个CPP并没有面向对象的结构. 所以进行编译时是“顺序编译”的,而main函数的定义又在A的定义之前.自然找不到标识符了.

  9. 提高Android Studio运行、编译速度方案

    1.安装完成后启动卡死 刚刚打开studio就卡在gradle building的界面再也不动了(去连接墙外的网下载),那么这个时候我们就需要把这个联网下载操作屏蔽掉,找到studio安装目录,找到i ...

  10. 2016北京集训测试赛(十七)Problem C: 数组

    Solution 线段树好题. 我们考虑用last[i]表示\(i\)这个位置的颜色的上一个出现位置. 考虑以一个位置\(R\)为右端点的区间最远能向左延伸到什么位置: \(L = \max_{i \ ...