vuex如何实现简易计数器

我们从自然手上收到的最大礼物就是生命。我必须拼命的奔跑我知道有很多人等着看我狼狈跌倒的下场嘲笑我不自量力

本文实例为大家分享了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')

效果图:

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

以上就是vuex如何实现简易计数器。路漫漫其修远兮,吾将上下而求索!更多关于vuex如何实现简易计数器请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明