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 相关文章推荐
jQuery Clone Bug解决代码
Dec 22 Javascript
js常用排序实现代码
Dec 28 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 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中鲜为人知的10个函数
2014/02/28 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
php微信开发之上传临时素材
2016/06/24 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
python对列进行平移变换的方法(shift)
2019/01/10 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Python netmiko模块的使用
2020/02/14 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
应届护士求职信范文
2014/01/26 职场文书
运动会致辞稿50字
2014/02/04 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
索尼ICF-5900W收音机测评
2022/04/24 无线电