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框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...
随机推荐
- Linux常用脚本命令总结
基本操作 通用操作 1. export 显示所有的环境变量,也可以获取到某个变量的详细信息: export # 显示所有 echo $SHELL # 只显示SHELL 2. whereis 使用系统自 ...
- 关于发布中报“未能加载文件或程序集“Newtonsoft.Json”或它的某一个依赖项”的问题解决方法
遇到这个问题了,我也是醉了,开发就一个还在忙别的事情,我想想自己解决 你们遇到过吗?我在网上找到好多解决的方法,比如改webconfig文件,或者改package.config文件,都没用.但是我看到 ...
- Comparable与Comparator,java中的排序与比较
1:比较和排序的概念 比较:两个实体类之间按>,=,<进行比较. 排序:在集合类中,对集合类中的实体进行排序.排序基于的算法基于实体类提供的比较函数. 基本型别都提供了默认的比较算法,如s ...
- js存款计算器原生小demo
大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...
- Java Collection(转载)
在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为方便.这些接口和类有很多对 抽象数据类型操作的API,而这是我们常用的且在数据 ...
- react入门之使用webpack搭配环境(一)
react入门之搭配环境(一) 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app ...
- android学习笔记之GridView的使用
除了listview会使用适配器外,还有一种就是GridView,listview是单列多行的显示形式,适用于多项目的查看.而GridView是多行多列的显示形式,一般用在查看图片样式的activit ...
- Ubuntu下OpenCV不能被某个python版本识别
Ubuntu下OpenCV不能被某个python版本识别 Solution: 可以进入相应版本的python,查看该python的path: python import sys print(sys.p ...
- 流程控制------if else分支语句
一.If`······else语句:如果条件成立,就执行在语句体... 语法:if 条件: 语句体1 语句体2 语句体3 ··········· 例如: 1. if True: ...
- SQL存储过程和函数
SQL存储过程: 由来:在具体应用中,一个完整的操作会包含多条SQL语句,在执行过程中需要根据前面SQL语句的执行结果有选择的执行后面的SQL语句.因此,mysql提供了数据库对象存储过程和函数. 定 ...