Vuex 最简单的数量增减实例
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
简单配置
在src目录下新建
|- src
|- vuex
|-store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
},
mutations: {
}
})
export default store;
在main.js
import store from './vuex/store'
/* eslint-disable no-new */
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app-box')
用vuex 最简单的操作

在vuex里面定义一个数量count变量,以及increment()增加和decrease()减少的方法
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 计算数量
count: 0
},
mutations: {
// 增加
increment (state) {
state.count ++
console.log(state.count);
},
// 减少
decrease (state) {
state.count --
console.log(state.count);
},
}
})
export default store;
页面:
<template>
<div class="main" >
<!-- 数量 -->
<!-- store.state 来获取状态对象 ,以及通过 store.commit 方法触发状态变更 -->
<div class="num">{{this.$store.state.count}}</div>
<!-- 操作 -->
<x-button type="primary" mini @click.native="increment">增加数量</x-button>
<x-button type="primary" mini @click.native="decrease">减少数量</x-button>
</div>
</template>
操作方法
/**
操作vuex里面的加法
store.commit 方法触发状态变更
我们通过提交 mutation 的方式,而非直接改变 store.state.count
是因为我们想要更明确地追踪到状态的变化
*/
increment(){
this.$store.commit('increment')
},
// 操作vuex里面的减法
decrease(){
this.$store.commit('decrease')
},
推荐几个好的vue ui库
vux库地址
iviewui库地址
饿了么库地址
其中我引入了vux框架, 这是个vue - 移动端Vue非常棒的组件库,如果大家复制代码过去,如果没有引入vux库,记得直接把< x-button>< x-button>改为< button>< /button>
Vuex 最简单的数量增减实例的更多相关文章
- vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
- 一个简单的Android小实例
原文:一个简单的Android小实例 一.配置环境 1.下载intellij idea15 2.安装Android SDK,通过Android SDK管理器安装或卸载Android平台 3.安装J ...
- mongodb 简单部署方案及实例
mongodb 简单部署方案及实例 转载:http://my.oschina.net/zhuzhu0129/blog/53290 第一节 准备工作 一 安装mongodb 我这里选用rehl 5.6 ...
- Linux下简单的socket通信实例
Linux下简单的socket通信实例 If you spend too much time thinking about a thing, you’ll never get it done. —Br ...
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- springmvc 项目完整示例01 需求与数据库表设计 简单的springmvc应用实例 web项目
一个简单的用户登录系统 用户有账号密码,登录ip,登录时间 打开登录页面,输入用户名密码 登录日志,可以记录登陆的时间,登陆的ip 成功登陆了的话,就更新用户的最后登入时间和ip,同时记录一条登录记录 ...
- vuex最简单、最详细的入门文档
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一 ...
- [WCF REST] 一个简单的REST服务实例
Get:http://www.cnblogs.com/artech/archive/2012/02/04/wcf-rest-sample.html [01] 一个简单的REST服务实例 [02] We ...
- PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例
前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...
随机推荐
- 之前同事问到的一道python题目
Python面试题 之前同事问了一道Python题目如下,暂时归类为面试题 题目:把类似'123.456'的字符串转换成浮点型数据 方法一: >>> print '{:.3f}'.f ...
- 单页面应用(spa)引入百度地图(Cannot read property 'dc' of undefined)
难点介绍 引入百度地图的时候,用原生的获取不到dom节点. ( var mapEle = document.getElementById(testApi): var map = new BMap.Ma ...
- java大数常用的方法
创建大数对象: BigInteger a=new BigInteger("123"); BigInteger a=BigInteger.valueOf(); 常用方法: multi ...
- 关于SQL语句条件值写中文查不到的问题
在使用jdbc链接MySQL执行SQL语句的时候,sql语句中的where条件,参数值带中文,则查询不到结果,而where条件,参数值都为数字或字母时可以正常查询, 原因是mysql的characte ...
- LoadRunner入门(一)
以LR自带的web系统为例(前提条件:已安装好lordrunner 11 ): 一.WebTours系统 是lordrunner自带一个飞机订票系统网站,支持IE浏览器 1. WebTours服务启动 ...
- GitLab Development Kit 环境搭建
在公司内网服务器上面搭建gdk环境,踩了很多坑,历时四五天(中间涉及申请开通固定外网),整理如下: 总览: 操作系统:redhat 6.3 参考文档:https://gitlab.com/gitlab ...
- 【社交系统研发日记】如何在 Laravel 中 “规范” 的开发验证码发送功能
顺便发个小通知:7月15日ThinkSNS+开源版发布,同时非开源的APP也走出内测阶段,体验二维码也全面发布体验. 什么是ThinkSNS ? ThinkSNS(简称TS),一款全平台综合性社交系统 ...
- XP oracle32位客户端安装找不到orandce11.dll.dbl
同事在XP上装oracle客户端,遇到下面的问题,mark一下. 提示找不到:orandce11.dll.dbl 点继续还会提示这个文件:orancds11.dll.dbl 网上找到解决方法: 删除注 ...
- MyISAM 和InnoDB 区别
MyISAM 和InnoDB 讲解 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别 为:MyISAM类型不支持事务处理等高级处 ...
- 设计模式(7)--Bridge(桥接模式)--结构型
1.模式定义: 桥接模式是对象的结构模式.又称为柄体(Handle and Body)模式或接口(Interface)模式.桥接模式的用意是“将抽象化(Abstraction)与实现化(Impleme ...