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 解析后的xml对象的读取方法细解
Jul 25 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 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
zf框架的Filter过滤器使用示例
2014/03/13 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
js函数的延迟加载实现代码
2012/10/11 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
简单实现python数独游戏
2018/03/30 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python读取Kafka实例
2019/12/23 Python
Python批量启动多线程代码实例
2020/02/18 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python装饰器结合递归原理解析
2020/07/02 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
构造器Constructor是否可被override?
2013/08/06 面试题
局火灾防控工作方案
2014/05/25 职场文书
学校春季防火方案
2014/06/08 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
房产协议书范本2014
2014/09/30 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
单位工资证明范本
2015/06/12 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Python几种酷炫的进度条的方式
2022/04/11 Python