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 相关文章推荐
一句话JavaScript表单验证代码
Aug 02 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
jQuery的三种$()
Dec 30 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 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
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php发送邮件的问题详解
2015/06/22 PHP
两款万能的php分页类
2015/11/12 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery制作网页版选项卡
2016/07/28 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
小程序实现tab标签页
2020/11/16 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python树莓派红外反射传感器
2019/01/21 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
网游商务专员求职信
2013/10/15 职场文书
幼儿园招生广告
2014/03/19 职场文书
工作目标责任书
2014/07/23 职场文书
消防安全培训工作总结
2015/10/23 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
浅谈Python数学建模之固定费用问题
2021/06/23 Python