vuex this.$store.state.属性和mapState的属性中的一点点区别
做泰康公众号的项目时候有一个需求创建公众号的时候后台有一个社区id提供给后台展现人员和部门,在群发消息时候也要给后台一个社区id只不过获取社区的id接口和上一个不是一样的,本来在页面中写了两个select,一个是用elementUI的select选择器,另一个是在标签选择器,现在在创建公众号时使用公众号社区的id让群发消息的select隐藏,我是用vuex在state里声明两个变量分别设置falese ,true,这样在引用各个接口时候v-show显示相应的数据,用this.$store.state.属性是可以设置和获取相应的值,但是用mapState属性能获取但是设置不了值,如果设置就会报错,如果设置需要在mutations中来处理。代码如下
state:
export default {
selectAcounts: true, // 创建公众号
selectMassmessag: false // 群发社区
}
mutations:
export default {
updateLoginStatus (state, bool) {
state.isLogin = bool
},
updateselectAcounts (state, bool) {
state.selectAcounts = bool
},
updateselectMassmessag (state, bool) {
state.selectMassmessag = bool
},
}
在组件方法中引入mapMutations
methods:{
...mapMutations(['updateselectAcounts', 'updateselectMassmessag'])
//点击选择按钮时候出发mapMutations中的两个方法改变state中的值 也可以通过this.store.$state.selectAcounts = false和this.$store.state.selectMassmessag = true来重新设置值
showTreeToast (type) { this.updateselectMassmessag(true) this.updateselectAcounts(false)
} }
vuex this.$store.state.属性和mapState的属性中的一点点区别的更多相关文章
- Vuex之store仓库计算属性Getter
(1)简介 Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里可以通过定义vuex的Getter来获 ...
- Do not mutate vuex store state outside mutation handlers.
组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...
- vuex使用之state访问状态对象
引入vuex1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install vuex --save 需要注意的是这里一定要加上 –save,因为你这个包我 ...
- Vuex状态数据源state
(1)单一状态树 Vuex 使用单一状态,用一个对象就包含了全部的应用层级状态.至此它便作为一个“唯一数据源 (SSOT)”而存在.这也意味着,每个应用将仅仅包含一个 store 实例. 单一状态树让 ...
- [Vuex系列] - 细说state的几种用法
state 存放的是一个对象,存放了全部的应用层级的状态,主要是存放我们日常使用的组件之间传递的变量. 我们今天重点讲解下state的几种用法,至于如何从头开始创建Vuex项目,请看我写的第一个文章. ...
- 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter
先说两句 上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨).如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄 ...
- vuex状态管理,state,getters,mutations,actons的简单使用(一)
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
- 组件之间的通讯:vuex状态管理,state,getters,mutations,actons的简单使用(一)
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
- 25、vuex改变store中数据
以登录为例: 1.安装vuex:npm install vuex --save 2.在main.js文件中引入: import store from '@/store/index.js'new Vue ...
随机推荐
- MySQL提供了以下三种方法用于获取数据库对象的元数据
MySQL提供了以下三种方法用于获取数据库对象的元数据: 1)show语句 2)从INFORMATION_SCHEMA数据库里查询相关表 3)命令行程序,如mysqlshow, mysqldump 用 ...
- 错误为Lc.exe已退出,代码为-1
近来在做项目的时候,突然遇到 了 LC.exe 已退出,代码为-1 的提示,怎么也编译不了,在查了相关的资料后,终于明白了原因,其解决方案如下 : 1. 以管理员的身份来运行vs, 并把项目中“pro ...
- Java远程通讯技术及原理分析
在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI.MINA.ESB.Burlap.Hessian.SOAP.EJB和JMS等,这些 ...
- springboot中JPA的应用
1.JPA JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关联映射工具来管理Java应用中的关系数据.他的出现主要是为了简 ...
- SAPCertifiedTechnologyAssociate-SystemAdministration(SAPHANAasaDatabase)
C_TADM55_75 SAP Certified Technology Associate - System Administration (SAP HANA as a Database) with ...
- 销售人员的分析,也可以用类似RFM的思路吗?
本文转自知乎 作者:接地气的陈老师 ————————————————————————————————————————————————————— 有同学问:“销售人员的分析,也可以用类似RFM的思路吗, ...
- angular.js前端分层开发(页面和js代码分离,并将js代码分层)
一. 抽取模块成base.js文件// 定义模块: var app = angular.module("eshop",['pagination']); 二. 抽取服务成brandS ...
- C#USB设备枚举Kernel32的PInvoke
using System; using System.Runtime.InteropServices; using System.Security; namespace Splash { #regio ...
- Jenkins配置中安装插件时提示“No such plugin: cloudbees-folder”
第一次配置Jenkins时,执行下图中出现“No such plugin: cloudbees-folder”,这时应该是服务还没起完全,稍等等就好
- day24-抽象类与接口类
接口类 1.继承有两种用途:一:继承基类的方法,并且做出自己的改变或者扩展(代码重用) 二:声明某个子类兼容于某基类,定义一个接口类,接口类中定义了一些接口名(就是函数名)且并未实现接口的功能,子类继 ...