vuex实现简易计数器

发布时间：2020-12-17 03:06:36 所属栏目：百科来源：网络整理

导读：本文实例为大家分享了vue.js计数器的制作方法，供大家参考，具体内容如下 src/components Hello.vue Now count is {{counterValue}} Increate.vue style lang="css" src/vuex store.js Vue.use(Vuex) const state = { count: 0 } const mutations = { INCREM

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

src/components

Hello.vue

Now count is {{counterValue}}

Increate.vue

src/vuex

store.js

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

dispatch('INCREMENT',3) export const reduceCounter = ({dispatch}) => dispatch('REDUCE')

getters.js

src/App.vue

src/main.js

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')

效果图：

本文已被整理到了《》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!