vuex实现简易计数器


Posted in Javascript onOctober 27, 2016

本文实例为大家分享了vue.js计数器的制作方法,供大家参考,具体内容如下

src/components

Hello.vue

<template>
 <div class="hello">
 <h1>Now count is {{counterValue}}</h1>
 <br>
 </div>
</template>

<script>
import { getCount } from '../vuex/getters'
export default {
 vuex: {
 getters: {
  counterValue: getCount
 }
 },
 data () {
 return {
 }
 }
}
</script>

<style scoped>
h1 {
 color: #42b983;
}
</style>

Increate.vue

<template>
 <div>
 <button @click='increment' class="btn btn-success">click me + 3</button>
 <button @click='reduce' class="btn btn-warning">click me - 1</button>
 </div>
</template>

<script>
import { incrementCounter, reduceCounter } from '../vuex/action'
export default {
 vuex: {
 actions: {
  increment: incrementCounter,
  reduce: reduceCounter
 }
 },
 data: function () {
 return {
 }
 },
 computed: {},
 ready: function () {},
 attached: function () {},
 methods: {},
 components: {}
}
</script>

<style lang="css">
</style>

src/vuex

store.js

import Vue from 'vue'
import Vuex from 'Vuex'

Vue.use(Vuex)

const state = {
 count: 0
}

const mutations = {
 INCREMENT (state, n) {
 state.count = state.count + n
 },
 REDUCE (state) {
 state.count--
 }
}

export default new Vuex.Store({
 state,
 mutations
})

action.js

export const incrementCounter = ({dispatch}) => dispatch('INCREMENT', 3)
export const reduceCounter = ({dispatch}) => dispatch('REDUCE')

getters.js

export function getCount (state) {
 return state.count
}

src/App.vue

<template>
 <div id="app">
 <img class="logo" src="./assets/logo.png">
 <hello></hello>
 <increate></increate>
 </div>
</template>

<script>
import Hello from './components/Hello'
import Increate from './components/Increate'
import store from './vuex/store'
export default {
 store,
 components: {
 Hello, Increate
 }
}
</script>

<style>
html {
 height: 100%;
}

body {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
}

#app {
 color: #2c3e50;
 margin-top: -100px;
 max-width: 600px;
 font-family: Source Sans Pro, Helvetica, sans-serif;
 text-align: center;
}

#app a {
 color: #42b983;
 text-decoration: none;
}

.logo {
 width: 100px;
 height: 100px
}
</style>

 src/main.js

// 入口文件
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
/* eslint-disable import VueRouter from 'vue-router'no-new */
new Vue({
 el: 'body',
 components: { App }
})

Vue.use(VueRouter)
Vue.use(VueResource)
var router = new VueRouter({
 hashbang: false, // 设置为true时,所有的路径都会被格式化为#!开头
 history: true // 默认false,利用history.pushState(), history.replaceState()来管理浏览历史记录
})

// require('./routers')(router)
router.start(App, '#app')

效果图:

vuex实现简易计数器

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
Maps Javascript
Jan 22 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
web打印小结
Jan 11 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
微信小程序  生命周期详解
Oct 27 #Javascript
require.js+vue开发微信上传图片组件
Oct 27 #Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 #Javascript
vue开发心得和技巧分享
Oct 27 #Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 #Javascript
简单模拟node.js中require的加载机制
Oct 27 #Javascript
浅谈jquery中next与siblings的区别
Oct 27 #Javascript
You might like
js类中获取外部函数名的方法
2007/08/19 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
python验证码图片处理(二值化)
2019/11/01 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
决心书范文
2014/03/11 职场文书
参观接待方案
2014/03/17 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
作风建设剖析材料
2014/10/06 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle