vue实例讲解之vuex的使用
vuex是一个状态管理插件,本文通过一个简单的实例来讲解一下,vuex的使用。
先看一张官方的图:
这个图新手一看估计是蒙的,简单解释一下,这个图表示的就是vue通过Action Mutations 和state三者之间的交互来达到改变componets状态的作用。组件disapth事件之后,触发vuex的Actions Actions通过commit传递一个action给Mutation执行,Mutation里面对state进行操作。state里面定义的状态返回出去,来控制compoents。
废话不多说了,直接上手一个项目就明白了。
先来整理一下vuex的使用的基本框架搭建:
第一步:引用vuex:
第二步:
第三步:导出vuex设置
第四步:在打包的入口文件里面引用vuex配置文件并且在vue实例上挂载
第五步:设置actions,mutaions,states,getters
基本流程知道了,下面就来看如何实现一个真实需求:
先看一下项目的效果,我们需要通过vuex来操作这个数字。通过点击按钮来增加数字,减少这个数字。
先用vue-cli搭建一个基础模板。
安装vuex npm install vuex --save-dev
然后在App.vue里面添加好按钮布好局,并且写好各自按钮点击的事件。
然后在script标签里面将vuex引用过来。
这里vuex有两个对象:
mapGeetters:获取数据的
mapActions : 管理所有方法
具体使用方法,如下面
computed:mapGetters([
'count',
'getOdd'
]),
methods:mapActions([
'increament',
'decrement',
'clickOdd'
])
接下来,新建一个store文件夹:里面新建index.js ,actions.js,mutations.js,getters.js,type.js四个文件。
项目结构如下:
index.js代码如下:
types:
Actions:
gettes:
mutations:
执行npm run dev 就实现我们的需求了,以后所有的状态管理就依葫芦画瓢了。
项目源代码:查看git地址。
vue实例讲解之vuex的使用的更多相关文章
- vue实例讲解之axios的使用
本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...
- vue实例讲解之vue-router的使用
实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...
- vue - 简单实例(vue-router + webpack + vuex)
分享 + 实践 基于公司部分产品技术栈转型使用vue,部分同事需要学习一下,快速上手,那么我很荣幸的成为了给大家分享vue技术栈的‘ ’导师‘,在这里我分享一下: 讲解大纲为:(我是有一份PPT的, ...
- 054——VUE中vue-router之实例讲解定义一下单页面路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 020——VUE中变异方法push的留言版实例讲解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 019——VUE中v-for与computer结合功能实例讲解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue-devtools 获取到 vuex store 和 Vue 实例的?
vue-devtools 获取到 vuex store 和 Vue 实例的? https://github.com/vuejs/vue-devtools 安装了 vue-devTools ...
- Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue.js路由参数简单实例讲解------简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...
随机推荐
- Ext.grid.EditorGridPanel联动设置单元格是否可以编辑和背景色
listeners:{ "beforeedit":function(iEventobj){ var col = iEventobj.row;//获取行 var record = i ...
- JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链
前 言 JRedu 上一篇博客中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方 ...
- css:box-sizing什么作用
css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,bord ...
- mysql添加外键约束变为索引
今天有位自己填上一坑:mysql储存引擎 原因就是数据库表引擎为:MyISAM,建立主外键关系需要是InnoDB: 解决方案:alter table table_name1 engine=inno ...
- jQuery常用工具方法
前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...
- 配置VNC SERVER 远程访问
1.安装软件包 # yum install tigervnc-server -y 2. 配置VNC用户 # vim /etc/sysconfig/vncservers VNCSERVERS=" ...
- 如何使用Git和码云Git@OSC
1.Git简介 关于Git是什么,阅读博客Git简介 2.Git 基础 Git命令很多,常用命令如下图 Workspace:工作区 Index/Stage :暂存区 Local Repository: ...
- 团队作业9--beta版本测试报告及发布说明
Beta版本测试报告 1.bug的分类 a.修复的bug 部分用户无法获取位置 e. 这个bug的确应该修复,但是没有时间在这个版本修复,延迟到下一个版本修复. 前端无法查看用户签到信息 2.场景测试 ...
- 201521123118《java程序与设计》第七次作业
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 public bo ...
- 201521123005《java程序设计》第五周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 接口 有点类似继承中父类与子类的关系 方法声明和常量值的集合 对行为的抽象 一种 ...