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 最简单的数量增减实例的更多相关文章

  1. vuex最简单、最直白、最全的入门文档

    前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...

  2. 一个简单的Android小实例

    原文:一个简单的Android小实例 一.配置环境 1.下载intellij idea15 2.安装Android SDK,通过Android SDK管理器安装或卸载Android平台   3.安装J ...

  3. mongodb 简单部署方案及实例

    mongodb 简单部署方案及实例 转载:http://my.oschina.net/zhuzhu0129/blog/53290 第一节 准备工作 一 安装mongodb  我这里选用rehl 5.6 ...

  4. Linux下简单的socket通信实例

    Linux下简单的socket通信实例 If you spend too much time thinking about a thing, you’ll never get it done. —Br ...

  5. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  6. springmvc 项目完整示例01 需求与数据库表设计 简单的springmvc应用实例 web项目

    一个简单的用户登录系统 用户有账号密码,登录ip,登录时间 打开登录页面,输入用户名密码 登录日志,可以记录登陆的时间,登陆的ip 成功登陆了的话,就更新用户的最后登入时间和ip,同时记录一条登录记录 ...

  7. vuex最简单、最详细的入门文档

    如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一 ...

  8. [WCF REST] 一个简单的REST服务实例

    Get:http://www.cnblogs.com/artech/archive/2012/02/04/wcf-rest-sample.html [01] 一个简单的REST服务实例 [02] We ...

  9. PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例

    前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...

随机推荐

  1. 64位linux系统通过编译安装apache+…

    二.安装php 上传php压缩包 例如:php-5.2.3.tar.gz 移动 mv php-5.2.3.tar.gz /usr/local/src 进入 cd /usr/local/src 解压 t ...

  2. 假面舞会[NOI2008]

    题目描述 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办方会把此编号告 ...

  3. Sangmado 公共基础类库

    Sangmado 涵盖了支撑 .NET/C# 项目开发的最基础的公共类库,为团队在不断的系统开发和演进过程中发现和积累的最公共的代码可复用单元. Sangmado 公共类库设计原则: 独立性:不与任何 ...

  4. <Mastering KVM Virtualization>:第二章 KVM内部原理

    在本章中,我们将讨论libvirt.QEMU和KVM的重要数据结构和内部实现.然后,我们将深入了解KVM下vCPU的执行流程. 在这一章,我们将讨论: libvirt.QEMU和KVM的内部运作方式. ...

  5. 解读 Vue 之 Reactive

    本文同步发表在 https://github.com/whxaxes/blog/issues/7 前言 在一篇文章中简单讲了 vue 是如何把模板解析成 render function 的,这一篇文章 ...

  6. windows 快捷方式(.lnk)代码执行漏洞(CVE-2017-8464 )[附EXP生成工具]

    最近看到网上曝光了一个windows远程代码执行的漏洞,黑客可以通过一个快捷方式在用户电脑上执行任意指令,于是便对该漏洞进行了部分分析. 1. 漏洞描述: MicrosoftWindows .LNK  ...

  7. Java企业微信开发_03_通讯录同步

    一.本节要点 1.获取通讯录密钥 获取方式: 登录企业微信—>管理工具—>通讯录同步助手—>开启“API接口同步”  ; 开启后,即可看到通讯录密钥,也可设置通讯录API的权限:读取 ...

  8. iOS开发中如何创建多个target

    在开发iOS应用程序的过程中,经常需要根据不同的需求,切换到不同的项目配置,或者打不同的包(测试环境.开发环境.生产环境等等),如果每次都是手动配置,一则比较麻烦,二则容易配置错,那么有没有更好的方案 ...

  9. noip普及组2007 奖学金

    奖学金 描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分从高到低排序,如果两个同学总分相同,再按语文成绩 ...

  10. react+flux编程实践(一) 基础篇

    1. React概览 最初听到React而还未深入了解它时,大多数人可能和我的想法一样:难道又是一个新的MVC/MVVM前端framework?深入了解后发现不是这么一回事,React关注的东西很单纯 ...