前言:vuex的使用,想必大家也都知道,类似于状态库的东西,存储某种状态,共互不相干的两个组件之间数据的共享传递等。我会分开给大家讲解vuex的使用,了解并掌握vuex的核心(state,mutations,getters,actions).
首先,我们需要将vuex的安装依赖下载下来,npm install vuex, 以下代码都会在vue-cli下完成
通过这样一个案例给大家说明mutations和state的作用及使用:
上述功能:主要通过便利状态库中的数据后,点击取消关注后,会从状态库中更新数据,并变更virtual dom
我们需要先了解一个基本的东西:
 
state:类似于vue中的data,状态库中的数据都放在state中,外部读取数据时,也是从state中读取的数据。
mutations:里面可以写一些方法供我们来更改state中的数据,需要配合commit使用。页面传递过来需求,然后commit(提交)到mutations中的某方法中用以改变state中的数据。可以说是存入数据 前面讲到的都是如何获取state的数据,那如何把数据存储到state中呢?在 Vuex store 中,实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。mutations下的函数接收state作为参数,接收一个叫做payload(载荷)的东东作为第二个参数,这个东东是用来记录开发者使用该函数的一些信息,比如说提交了什么,提交的东西是用来干什么的,包含多个字段,所以载荷一般是对象(其实这个东西跟git的commit很类似)还有一点需要注意:mutations方法必须是同步方法!
1.我们先创建一个store.js文件,用来作为状态库
源码如下:
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
 
state中changeCollect方法就是我们用来删除myCollect数组的方法,两个参数,一个是state(数据中的哪个数据),oIndex为裁剪的额一个下标。
new Vuex.Store({}) 表示创建一个Vuex实例,通常情况下,他需要注入到Vue实例里. Store是Vuex的一个核心方法,字面上理解为“仓库”的意思。
Vuex Store是响应式的,当Vue组件从store中读取状态(state选项)时,若store中的状态发生更新时,他会及时的响应给其他的组件(类似双向数据绑定) 而且不能直接改变store的状态,改变状态的唯一方法就是,提交更改(mutations选项)以上为store状态库文件
vue调用文件如下:
<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>
 
该文件中,computed中myCollect方法用以获取状态库中的数据,一般都放在computed计算属性中获取数据,因为该属性会监控数据变化并及时做出相应。
然后再methods方法中将我们所点击取消关注的行的下标获取,并通过commit方法发送给状态库,两个参数("mutations中的方法的名称",传递的数据下标);
以上为博主通过mpvue开发小程序所列,所以大家主要看思路哦,copy代码永远不会长大。加油
至此我们通过vuex获取数据,渲染,并动态更新数据就算完成了,还有什么不明白的小火把记得给我留言哦。未完待续......

vuex(一)mutations的更多相关文章

  1. 在vuex的mutations中使用vue的小技巧

    问题: 在vuex组件中的mutations属性中的定义的函数,有时会要用到vue这个对象.正常在其他的地方使用是通过this这个变量来获取,但是在mutations定义的函数中this指定的是Vue ...

  2. vuex的mutations传值

    mutations是要通过方法触发的,用于更改store里的数据的.this.$store.commit("mutationsName") 例子: store.js import ...

  3. Vue Vuex state mutations

    Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...

  4. vuex中mutations与actions的区别

    要执行vuex中的函数,有两种方法: 1.commit,例如this.$store.commit("GETMODULESELECTLIST"); //mutations中的方法 2 ...

  5. vuex的mutations如何传多个传参?

    1.不传参时的写法(官网例子): const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) ...

  6. vuex中mutations数据响应

    vuex中的mutation需遵守Vue的响应规则: 既然Vuex的store中的状态是响应式的,那么在我们变更状态时,监视状态的Vuex最好在state中初始化好所有的所需属性. 如果需要在对象上添 ...

  7. vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构

    今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题. 问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能 ...

  8. 初识vuex

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

  9. Vue状态管理vuex

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

  10. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

随机推荐

  1. POJ-2418 Hardwood Species(二叉搜索树)

    思路就是先将每个单词存进二叉树中,没出现一次,修改该单词所在结点的cnt++: 最后通过递归中序遍历输出结果. 思路很清晰,主要注意一下指针的使用,想一想为什么要这么用? 简单的解释就是,insert ...

  2. python的socket的tcp协议编程

    服务端代码如下: # _*_ coding:utf-8 _*_import socketimport datetimeHOST='0.0.0.0'PORT=3434 s=socket.socket(s ...

  3. PHP设计模式(五): 原型模式

  4. 安装GoMap

    参考:https://github.com/ehrudxo/GoMap 1.依赖go包安装 gorm包安装 直接在github首页搜索gorm,找到对应的gorm包: 然后打开本机cmd命令行窗口,切 ...

  5. [WCF安全1]使用basicHttpBinding构建UserName授权的WCF应用程序

    最近到了新公司,leader让我研究一下WCF的传输安全机制.以前也做过WCF的应用,但是很少涉及安全方面的东西.所以,花了三天的时间研究了一下如何在WCF的应用程序中配置安全.在这个系列文章中,我会 ...

  6. 《用 Python 学微积分》笔记 1

    <用 Python 学微积分>原文见参考资料 1. 1.多项式 f(x)=x3-5x2+9 def f(x): return x**3 - 5*x**2 + 9 print f(3) pr ...

  7. MySQL 存储过程参数用法 in, out, inout

    MySQL 存储过程参数有三种类型:in.out.inout.它们各有什么作用和特点呢? 一.MySQL 存储过程参数(in) MySQL 存储过程 “in” 参数:跟 C 语言的函数参数的值传递类似 ...

  8. LeetCode第[98]题(Java):Validate Binary Search Tree(验证二叉搜索树)

    题目:验证二叉搜索树 难度:Medium 题目内容: Given a binary tree, determine if it is a valid binary search tree (BST). ...

  9. 【Python】深入浅出学习Python的yield和generator

    背景 之前走马观花接触过Python协程的概念,这两天和一个同事聊到了协程,死活想不起来曾经看过的东西,就记得一个yield,概念不清: 所以想捋一捋相关的东西,此篇作为学习的记录. Generato ...

  10. cassandra 之 在spark-shell 中使用 spark cassandra connector 完整案例

    1.cassandra 准备 启动cqlsh, CQLSH_HOST=172.16.163.131 bin/cqlsh cqlsh>CREATE KEYSPACE productlogs WIT ...