vuex实现简易计数器

vuex实现简易计数器

本文实例为大家分享了vue.js计数器的制作方法，供大家参考，具体内容如下

src/components

Hello.vue

Increate.vue

click me + 3

click me - 1

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

<hello>

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前端组件学习教程》，欢迎大家学习阅读。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。