Vuex访问状态对象的方法
除了《Vuex最基本样例》中的方法外,还有两种方法访问状态对象state:
只需要改app.vue文件
方法一:引入computed
<template>
<div id="app">
<p>hello vuex</p>
<p>{{$store.state.count}}</p>
<p>{{count1}}</p>
<button @click = "$store.commit('add')">+</button>
<button @click = "$store.commit('reduce')">-</button>
</div>
</template> <script>
export default {
name: 'App',
data(){
return {
count: 1
}
},
computed:{
count1(){
return this.$store.state.count+1
}
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
方法二:在方法一基础上引入mapState
<template>
<div id="app">
<p>hello vuex</p>
<p>{{$store.state.count}}</p>
<p>{{count1}}</p>
<button @click = "$store.commit('add')">+</button>
<button @click = "$store.commit('reduce')">-</button>
</div>
</template> <script>
import { mapState } from 'vuex' //注意这里
export default {
name: 'App',
data(){
return {
count: 1
}
},
computed: mapState({
count1: state=>state.count //这里
})
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
方法三:简化的mapState写法
<template>
<div id="app">
<p>hello vuex</p>
<p>{{$store.state.count}}</p>
<p>{{count}}</p> //这里是count就行
<button @click = "$store.commit('add')">+</button>
<button @click = "$store.commit('reduce')">-</button>
</div>
</template> <script>
import { mapState } from 'vuex'
export default {
name: 'App',
// data(){ //这里要注释掉data里的count,否则不生效,不知道原因。这点和视频教程不太一样
// return {
// count: 1
// }
// },
computed: mapState([
'count'
])
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
运行结果如下:
看出来,结果是一样的。
Vuex访问状态对象的方法的更多相关文章
- state访问状态对象
状态对象赋值给内部对象,也就是把stroe.js中的值,赋值给我们模板里data中的值.我们有三种赋值方式: 1.通过computed的计算属性直接赋值 Count.vue {count} <s ...
- vuex使用之state访问状态对象
引入vuex1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install vuex --save 需要注意的是这里一定要加上 –save,因为你这个包我 ...
- 理解vuex的状态管理模式架构
理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...
- Java 访问限制符 在同一包中或在不同包中:使用类创建对象的权限 & 对象访问成员变量与方法的权限 & 继承的权限 & 深入理解protected权限
一.实例成员与类成员 1. 当类的字节码被加载到内存, 类中类变量.类方法即被分配了相应内存空间.入口地址(所有对象共享). 2. 当该类创建对象后,类中实例变量被分配内存(不同对象的实例变量互不相同 ...
- Java中两个线程是否可以同时访问同一个对象的两个不同的synchronized方法?
不可以!!! 多个线程访问同一个类的synchronized方法时, 都是串行执行的 ! 就算有多个cpu也不例外 ! synchronized方法使用了类java的内置锁, 即锁住的是方法所属对象本 ...
- 在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...
- ResquestInfoServlet类通过访问HttpServletRequest对象的各种方法来读取HTTP请求中的特定信息,并且把它们写入到HTML中
ResquestInfoServlet类通过访问HttpServletRequest对象的各种方法来读取HTTP请求中的特定信息,并且把它们写入到HTML中 ResquestInfoServlet.j ...
- python添加、修改、删除、访问类对象属性的2种方法
1.直接添加.修改.删除.访问类对象属性 class Employee (object): empCount = 0 def __init__(self, name, salary) : self.n ...
- JavaScript常用对象的方法和属性
---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...
随机推荐
- Flask视图函数与模板语法
1.Django中的CBV模式 2.Flask中的CBV和FBV def auth(func): def inner(*args, **kwargs): result = ...
- Linux PHP7的openssl扩展安装
Linux环境下使用PHPmailer发送邮件时,出现如下错误: SMTP -> ERROR: Failed to connect to server: Unable to find the s ...
- Oracle数据库查找持有锁的SQL语句,而不是请求锁的SQL语句(原创)
Oracle数据库查找持有锁的SQL语句,而不是请求锁的SQL语句 查找活动的事务以及活动事务关联的会话信息 select s.sid 会话ID, s.serial# 会话序列号, s.usernam ...
- Delphi APP 開發入門(九)拍照與分享
Delphi APP 開發入門(九)拍照與分享 分享: Share on facebookShare on twitterShare on google_plusone_share 閲讀次數:30 ...
- hadoop记录(一)
linux基础和javase基础[包含mysql] 这些是基本功,刚开始也不可能学的很精通,最起码要对linux中的一些基本的命令混个脸熟,后面学习各种框架的时候都会用到,用多了就熟悉了.javase ...
- MVC[xml]页面传值
MVC 各种传值方式 ViewData传值.HomeController.cs Co de: public ActionResult Index(){ ViewData["Titl ...
- Linux下编程学习一
本篇主要记录一些在学习LINUX下编程时,, C和C++语言的一些基础的常识, 一. 函数指针 void MyFun(int x); 函数声明 void (*FunP)(int ); 函数指针声明 下 ...
- git 提交和下载代码
在github下需先 New repository 下载:进入程序工程目录下 如 cd f: cd ./Program\ Files/eclipse/workspace/IMoocMusic/ git ...
- JVM性能调优(转)
本文转自:http://www.cnblogs.com/chen77716/archive/2010/06/26/2130807.html 最近因项目存在内存泄漏,故进行大规模的JVM性能调优 , 现 ...
- 利用arcgis制作出 源解析要用的ASCII文件
准备:1.确定好模拟区域范围,精度,行列数 2.确定好源解析的城市规划 思路: 1.全国省级图+本地市县图-->合成一张区域图(联合) 合成之后,添加一个字段,一个数字类型字段 ...