概念流程图:

案例:

(1)src/store/index.js导出仓库

(2)在入口文件引入仓库并派发到每个组件,在入口文件main.js引入,挂载到根组件上,方便以后使用this.$store调用仓库数据

(3)组件读取显示

直接读取:

年纪:{{this.$store.person.age}}
姓名:{{this.$store.person.name}}
性别:{{this.$store.person.sex}}

mapState映射读取

在计算属性进行映射设置

映射读取显示

年纪:{{person.age}}
姓名:{{person.name}}
性别:{{person.sex}}

(4)点击时修改state

步骤1:给年纪绑定点击事件,使用dispatch派发事件

这里可以使用映射API-简化操作流程

引入actions映射API步骤

使用位置:不在computed计算属性里,而是在methods方法里,和其他方法同级

步骤2:actions接收事件,并通过commit调用mutations

步骤3:调用mutations去改变共用数据

Actions里都是异步操作

Mutations是同步操作

.

Vuex操作步骤的更多相关文章

  1. ABP创建数据库操作步骤

    1 ABP创建数据库操作步骤 1.1 SimpleTaskSystem.Web项目中的Web.config文件修改数据库配置. <add name="Default" pro ...

  2. Altium Designer PCB双面板制作打印操作步骤

    Altium Designer PCB双面板制作打印操作步骤百度知道:http://jingyan.baidu.com/article/335530da83441c19cb41c3db.html?st ...

  3. yii2 rbac权限控制详细操作步骤

    作者:白狼 出处:http://www.manks.top/article/yii2_rbac_description本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 ...

  4. yii2权限控制rbac之详细操作步骤

    本篇的主题是 rbac权限控制的详细操作步骤,注意是操作步骤哦,关于配置与rbac的搭建,我们在博文 yii2搭建完美后台并实现rbac权限控制实例教程说的再清楚不过了. 但是,在很多人的反馈下,说是 ...

  5. windows2003最详细的安装操作步骤.(最详细)

    以下为windows2003的安装操作步骤,由于安装操作步骤较多,安装可能需要一定的实际安装经验.安装时请参照此文档一步步完成安装. 一.首先准备好Windows2003安装光盘CD1,将CD1光盘放 ...

  6. selenium高亮显示操作步骤方法

    package com.allin.pc;import java.util.List;import org.openqa.selenium.WebElement;import org.openqa.s ...

  7. ArcGIS生成根据点图层生成等值面并减小栅格锯齿的操作步骤

    一.打开ArcMAP并加载上相应的点图层和边界面图层 二.ArcToolbox--Spatial Analyst工具--差值分析--克里金法(根据不同的情况选择不同的算法,这次的处理实际上使用的是样条 ...

  8. 联想预装win8系统改成win7操作步骤及注意事项

    联想消费台式机与一体机预装Windows8改装Windows7的操作步骤及常见问题 前提说明: 目前联想出厂预装Windows 8的台式和一体机使用都是UEFI+GPT硬盘的组合,并且开启了安全启动, ...

  9. Eclipse中通过Android模拟器调用OpenGL ES2.0函数操作步骤

    原文地址: Eclipse中通过Android模拟器调用OpenGL ES2.0函数操作步骤 - 网络资源是无限的 - 博客频道 - CSDN.NET http://blog.csdn.net/fen ...

随机推荐

  1. 201871010113-刘兴瑞《面向对象程序设计(java)》第二周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>    https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ...

  2. SpringMVC其他说明(六)

    1. 编码问题 在web.xml中配置过滤器: <!-- 源码:spring-web.jar 功能:字符集过滤器,设置编码集为UTF-8,解决POST的中文乱码问题. 参数说明: encodin ...

  3. 洛谷 P1381 单词背诵

    洛谷 P1381 单词背诵 洛谷传送门 题目描述 灵梦有n个单词想要背,但她想通过一篇文章中的一段来记住这些单词. 文章由m个单词构成,她想在文章中找出连续的一段,其中包含最多的她想要背的单词(重复的 ...

  4. 第九周周五计划&&周四总结

    今天主要将提取地主题词入库以及重新对新闻分类. 测试了一下单纯使用主题词作为主题追踪依据不是很好,明天尝试使用特征值提取(主题词(名词实体))+摘要比对综合.但是目前还没想好是每篇新闻的都要追踪还是热 ...

  5. mybatis中<include>标签的作用

    MyBatis中sql标签定义SQL片段,include标签引用,可以复用SQL片段 sql标签中id属性对应include标签中的refid属性.通过include标签将sql片段和原sql片段进行 ...

  6. JQuery插件 aos.js-添加动画效果

    原文地址:http://www.mamicode.com/info-detail-1785357.html 简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页 ...

  7. LeetCode 151:给定一个字符串,逐个翻转字符串中的每个单词 Reverse Words in a String

    公众号:爱写bug(ID:icodebugs) 翻转字符串里的单词 Given an input string, reverse the string word by word. 示例 1: 输入: ...

  8. HTML+CSS基础 css的尺寸

    css的尺寸 width 宽   height高 Line-light   行高    行高是由三部分构成,上间距.文本高度.下间距. 且上下间距相等.所以文字居中 行高.一旦设置行高了,元素内部必须 ...

  9. JSONObject解析json数据

    首先先看一下我们要解析的json数据是什么样子的: 代码: String url="http://113.57.190.228:8001/Web/Report/GetBigMSKReport ...

  10. Java生鲜电商平台-库存管理设计与架构

    Java生鲜电商平台-库存管理设计与架构 WMS的功能: 1.业务批次管理 该功能提供完善的物料批次信息.批次管理设置.批号编码规则设置.日常业务处理.报表查询,以及库存管理等综合批次管理功能,使企业 ...