vuex mapState使用
<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使用的更多相关文章
- vuex mapState、mapGetters、mapActions、mapMutations的使用
例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...
- Vuex mapState的基本使用
mapState把Store中的state映射到组件中的计算属性 Store文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ...
- Vue 状态管理之vuex && {mapState,mapGetters}
1 # 一.理解vuex 2 1.概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读写),也是一种组件间通信的方式,且适用于任意组件间 ...
- vuex 中关于 mapState 的作用
辅助函数 Vuex 除了提供我们 Store 对象外,还对外提供了一系列的辅助函数,方便我们在代码中使用 Vuex,提供了操作 store 的各种属性的一系列语法糖,下面我们来一起看一下: mapSt ...
- [转] Vuex入门(2)—— state,mapState,...mapState对象展开符详解
1.state state是什么? 定义:state(vuex) ≍ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 ...
- vuex中mapState、mapMutations、mapAction的理解
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性. // 在单独构建的版本中辅助函数为 Vue ...
- 初识vuex
1.简介 vuex是 vue官方推荐的一个状态管理器.当我们遇到很多状态改变时,组件之间的通信就会变得复杂,这时候vuex的强大就展现出来. 我们从vuex的原理以及vuex的api两个部分介绍vue ...
- vuex 使用文档
安装 直接下载CDN 引用 <script src="/path/to/vue.js"></script> <script src="/pa ...
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
随机推荐
- kvm虚拟化实践
.环境初始化 [root@localhost ~]# hostnamectl set-hostname kvm-node1 [root@kvm-node1 ~]# sed -i '/SELINUX=/ ...
- Java.io.File中的delete()方法和deleteOnExit()方法的区别
1.delete()方法: 当调用delete()方法时,直接删除文件,不管该文件是否存在,一经调用立即执行: 2.deleteOnExit()方法: 当 ...
- 【02】react 之 jsx
React与ReactDOM是react中核心对象,React为核心功能,ReactDOM提供对DOM的操作,以前的老版本中只有React没有ReactDOM,新版本中分离出ReactDOM提供两种渲 ...
- 【HDOJ5981】Guess the number(DP)
题意:A和B玩一个游戏:A在[L,R]之间随机选取一个数X,之后由B来猜这个数, 如果猜的数比X小,则A就告诉B你猜的数小了, 如果猜的数等于X则游戏结束, 如果猜的数大于X,则在这之后A只会回答B是 ...
- boost::thread编程-线程中断(转)
原文转自 http://blog.csdn.net/anda0109/article/details/41943691 thread的成员函数interrupt()允许正在执行的线程被中断,被中断的线 ...
- python之wxPython菜单使用详解
import wx APP_EXIT=1 #定义一个控件ID class Example(wx.Frame): def __init__(self, parent, id, title): super ...
- 关于apache 虚拟主机配置访问403的问题
<Directory /> Options FollowSymLinks Order allow,deny Allow from all</Directory&g ...
- C++ 找不到方法标识符
其实原因是这个CPP并没有面向对象的结构. 所以进行编译时是“顺序编译”的,而main函数的定义又在A的定义之前.自然找不到标识符了.
- 提高Android Studio运行、编译速度方案
1.安装完成后启动卡死 刚刚打开studio就卡在gradle building的界面再也不动了(去连接墙外的网下载),那么这个时候我们就需要把这个联网下载操作屏蔽掉,找到studio安装目录,找到i ...
- 2016北京集训测试赛(十七)Problem C: 数组
Solution 线段树好题. 我们考虑用last[i]表示\(i\)这个位置的颜色的上一个出现位置. 考虑以一个位置\(R\)为右端点的区间最远能向左延伸到什么位置: \(L = \max_{i \ ...