vuex(一)mutations
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex); const store = new Vuex.Store({
state: {
myCollect: [
{ "name": "杨志", "level": "主治医师", "department": "(门)消化儿科","url":"/static/images/personal-center/start.jpg" },
{ "name": "胡夷光", "level": "副主治医师", "department": "(门)内科","url":"/static/images/personal-center/start.jpg" },
{ "name": "李特点", "level": "专家", "department": "(门)皮肤科","url":"/static/images/personal-center/start.jpg" },
],
},
mutations: {
changeCollect: function (state,oIndex) {
state.myCollect.splice(oIndex,1)
}
},
getters: {},
actions: {}
});
export default store
<template>
<div class="wraper">
<div class="container">
<div class="section">
<block v-if="collect"></block>
<block v-else>
<a class="row" v-for="(item,index) in myCollect" :key="index" href="javascript:;" hover-class="none">
<div class="col-l"><img style="width: 96rpx;height: 96rpx;" :src="item.url"></div>
<div class="col-r">
<div class="info">
<p class="info-top"><span class="info-name">{{item.name}}</span> <span class="info-level">{{item.level}}</span></p>
<p class="info-depart">{{item.department}}</p>
</div>
<div :data-index="index" class="btn-cancel" @click="unFollow('取消关注',$event)">取消关注</div>
</div>
</a>
</block>
</div>
</div>
</div>
</template>
<script>
import store from '../../../utils/store';
export default {
components: {},
data () {
return {
collect: false,
}
},
computed: {
myCollect: function () {
return store.state.myCollect;
},
},
methods: {
unFollow: function (prompt,res) {
// console.log(prompt,res);
let oIndex = res.currentTarget.dataset.index;
store.commit("changeCollect",oIndex);
}
},
}
</script>
<style scoped>
.container {
flex: 1;
overflow-y: auto;
background-color: #fff;
}
.section {
width: 100%;
height: 100%;
}
.row {
width: 100%;
height: 160rpx;
line-height: 160rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
.row .col-l {
width: 96rpx;
height: 96rpx;
/*box-sizing: border-box;*/
padding-left: 24rpx;
}
.row .col-r {
flex: 1;
height: 100%;
box-sizing: border-box;
border-bottom: 1rpx solid #ebebeb;
padding-right: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.col-r .info {
box-sizing: border-box;
padding-left: 24rpx;
}
.col-r .info p {
height: 30rpx;
line-height: 30rpx;
}
.btn-cancel {
height: 55rpx;
line-height: 55rpx;
padding: 0 22rpx;
border: 1rpx solid #999;
color: #999;
font-size: 30rpx;
border-radius: 5rpx;
}
.info {
font-size: 26rpx;
}
.col-r .info .info-top {
height: 60rpx;
line-height: 60rpx;
}
.info .info-name {
font-size: 36rpx;
color: #404040;
font-weight: 600;
}
.info .info-level {
color: #404040;
margin-left: 21rpx;
}
.info .info-depart {
color: #999;
}
</style>
vuex(一)mutations的更多相关文章
- 在vuex的mutations中使用vue的小技巧
问题: 在vuex组件中的mutations属性中的定义的函数,有时会要用到vue这个对象.正常在其他的地方使用是通过this这个变量来获取,但是在mutations定义的函数中this指定的是Vue ...
- vuex的mutations传值
mutations是要通过方法触发的,用于更改store里的数据的.this.$store.commit("mutationsName") 例子: store.js import ...
- Vue Vuex state mutations
Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...
- vuex中mutations与actions的区别
要执行vuex中的函数,有两种方法: 1.commit,例如this.$store.commit("GETMODULESELECTLIST"); //mutations中的方法 2 ...
- vuex的mutations如何传多个传参?
1.不传参时的写法(官网例子): const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) ...
- vuex中mutations数据响应
vuex中的mutation需遵守Vue的响应规则: 既然Vuex的store中的状态是响应式的,那么在我们变更状态时,监视状态的Vuex最好在state中初始化好所有的所需属性. 如果需要在对象上添 ...
- vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构
今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题. 问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能 ...
- 初识vuex
1.简介 vuex是 vue官方推荐的一个状态管理器.当我们遇到很多状态改变时,组件之间的通信就会变得复杂,这时候vuex的强大就展现出来. 我们从vuex的原理以及vuex的api两个部分介绍vue ...
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
随机推荐
- POJ-2418 Hardwood Species(二叉搜索树)
思路就是先将每个单词存进二叉树中,没出现一次,修改该单词所在结点的cnt++: 最后通过递归中序遍历输出结果. 思路很清晰,主要注意一下指针的使用,想一想为什么要这么用? 简单的解释就是,insert ...
- python的socket的tcp协议编程
服务端代码如下: # _*_ coding:utf-8 _*_import socketimport datetimeHOST='0.0.0.0'PORT=3434 s=socket.socket(s ...
- PHP设计模式(五): 原型模式
- 安装GoMap
参考:https://github.com/ehrudxo/GoMap 1.依赖go包安装 gorm包安装 直接在github首页搜索gorm,找到对应的gorm包: 然后打开本机cmd命令行窗口,切 ...
- [WCF安全1]使用basicHttpBinding构建UserName授权的WCF应用程序
最近到了新公司,leader让我研究一下WCF的传输安全机制.以前也做过WCF的应用,但是很少涉及安全方面的东西.所以,花了三天的时间研究了一下如何在WCF的应用程序中配置安全.在这个系列文章中,我会 ...
- 《用 Python 学微积分》笔记 1
<用 Python 学微积分>原文见参考资料 1. 1.多项式 f(x)=x3-5x2+9 def f(x): return x**3 - 5*x**2 + 9 print f(3) pr ...
- MySQL 存储过程参数用法 in, out, inout
MySQL 存储过程参数有三种类型:in.out.inout.它们各有什么作用和特点呢? 一.MySQL 存储过程参数(in) MySQL 存储过程 “in” 参数:跟 C 语言的函数参数的值传递类似 ...
- LeetCode第[98]题(Java):Validate Binary Search Tree(验证二叉搜索树)
题目:验证二叉搜索树 难度:Medium 题目内容: Given a binary tree, determine if it is a valid binary search tree (BST). ...
- 【Python】深入浅出学习Python的yield和generator
背景 之前走马观花接触过Python协程的概念,这两天和一个同事聊到了协程,死活想不起来曾经看过的东西,就记得一个yield,概念不清: 所以想捋一捋相关的东西,此篇作为学习的记录. Generato ...
- cassandra 之 在spark-shell 中使用 spark cassandra connector 完整案例
1.cassandra 准备 启动cqlsh, CQLSH_HOST=172.16.163.131 bin/cqlsh cqlsh>CREATE KEYSPACE productlogs WIT ...