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实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
php与js的区别是什么
Aug 05 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
JavaScript实现滚动加载更多
Dec 27 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 IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python读取xlsx的方法
2018/12/25 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
python中的django是做什么的
2020/07/31 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
如何唤起类中的一个方法
2013/11/29 面试题
文员岗位职责范本
2014/03/08 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
党校学习党性分析材料
2014/12/19 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
培训班开班主持词
2015/07/02 职场文书
公司酒会致辞
2015/07/30 职场文书
毕业设计工作总结
2015/08/14 职场文书
2016年十一促销广告语
2016/01/28 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
JS实现简单的九宫格抽奖
2022/06/28 Javascript