前言: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. Elasticsearch之中文分词器

    前提 什么是倒排索引? Elasticsearch之分词器的作用 Elasticsearch之分词器的工作流程 Elasticsearch之停用词 Elasticsearch的中文分词器 1.单字分词 ...

  2. tcpdump抓包笔记

    抓取指定端口的数据包 并保存文件,用wireshark分析 tcpdump -Ans 4096 -i any port 8080 -w ../mpass.cap 抓取指定端口和指定ip的数据包 并保存 ...

  3. NPM Scripts -- onchange parallelshell

    Watch for changes to the styles.scss file and automatically compile it to the css file. Run multiple ...

  4. ubuntu 14.04 解决apt-get update报错

    apt-get update 报如下错误: 忽略 http://cn.archive.ubuntu.com trusty-backports/multiverse Translation-zh 忽略 ...

  5. 设计模式--抽象工厂模式C++实现

    抽象工厂模式C++实现 1定义 为创建一组相关或者依赖的对象提供一个接口,且无需指定他们的具体类 2类图 3实现 class AbstractProduct { protected: Abstract ...

  6. Dubbo本地开发技巧

    背景 作为后端服务负载.前后分离的主要手段,dubbo在业界中使用率还比较高.随着Dubbo系统的增多,本地开发.调试就出现了麻烦之处 直接在开发本地起同样一份服务 由于Dubbo采用负载均衡的策略, ...

  7. 第八天 RHEL7.2 文件权限管理(第一部分)

    一.文件的基本权限 文件有三种访问方式限制访问权限 第一种:文件所有者的访问权限 第二种:文件所有者同组的访问权限 第三种:其他人访问权限 当使用ls -l 或ll命令时,可查看此三种权限 在权限描述 ...

  8. 河南省多校联盟二-A

    1279: 简单的背包问题 时间限制: 1 秒  内存限制: 32 MB提交: 361  解决: 20 题目描述 相信大家都学过背包问题了吧,那么现在我就考大家一个问题.有n个物品,每个物品有它的重量 ...

  9. ZOJ 2599 Graduated Lexicographical Ordering ★(数位DP)

    题意 定义两个数的比较方法,各位数字之和大的数大,如果数字和相等则按字典序比较两个数的大小.输入n,k,求:1.数字k的排名:2.排名为k的数. 思路 算是一类经典的统计问题的拓展吧~ 先来看第一问. ...

  10. linux-Centos7安装mysql5.7.19

    1.下载mysql 网址: https://dev.mysql.com/downloads/mysql/ 2.选择源码包,通用版点击下载 直接下载就可以了,不用登录 3.解压编译 先安装相关依赖包 y ...