前端培训之demo1: 计数器

1.store.js
/** * vuex
的 store
对 象 模 块
*/ import Vue from ‘vue’ import Vuex from ‘vuex’
Vue.use(Vuex)
/* state
对 象
类 似 于 data */ const state = { count: 0 //
初 始 化 状 态 数 据
}
/* mutations
对 象
包 含 个 方 法 :
能 直 接 更 新 state 一 个 方 法 就 是 一 个 mutation mutation 只 能 包 含 更 新 state 的 同 步 代 码 ,
也 不 会 有 逻 辑
mutation
由 action
触 发 调 用 : commit(‘mutationName’)
*/ const mutations = { INCREMENT(state) { state.count++ }, DECREMENT (state) { // ctrl + shift + x state.count-} }
/* actions
对 象
包 含 个 方 法 :
触 发 mutation
调 用 ,
间 接 更 新 state
一 个 方 法 就 是 一 个 action action 中 可 以 有 逻 辑 代 码 和 异 步 代 码 action 由 组 件 来 触 发 调 用 : this.$store.dispatch(‘actionName’) */ const actions = { increment ({commit}) { commit(‘INCREMENT’) },
decrement ({commit}) { commit(‘DECREMENT’) },
incrementIfOdd ({commit, state}) { if(state.count%2===1) { commit(‘INCREMENT’) } },
incrementAsync ({commit}) { setTimeout(() => { commit(‘INCREMENT’) }, 1000) }
}

/* getters
对 象
包 含 多 个 get
计 算 计 算 属 性 方 法
*/ const getters = { oddOrEven (state) { return state.count%2===0 ? ‘偶数’ : ‘奇数’ }, count (state) { return state.count } }
//
向 外 暴 露 store
实 例 对 象 export default new Vuex.Store({ state, mutations, actions, getters })
2.main.js
import Vue from ‘vue’ import app from ‘./app1.vue’ // import app from ‘./app.vue’ import store from ‘./store’
new Vue({ el: ‘#app’, render: h => h(app), store // 所 有 组 件 都 多 个 一 个 属 性 : $store }

3.app.vue(未优化前)
<template>
<div> <p>clicked: {{$store.state.count}} times, count is {{oddOrEven}}</p> <button @click=”increment”>+</button> <button @click=”decrement”>-</button> <button @click=”incrementIfOdd”>increment if odd</button> <button @click=”incrementAsync”>increment async</button> </div> </template>
<script> export default { computed: { oddOrEven () { return this.$store.getters.oddOrEven } },
methods: { increment () { this.$store.dispatch(‘increment’) }, decrement () { this.$store.dispatch(‘decrement’) }, incrementIfOdd () { this.$store.dispatch(‘incrementIfOdd’) }, incrementAsync () { this.$store.dispatch(‘incrementAsync’) } }
} </script>
<style>
</style>

4.app2.vue(优化后)
<template> <div> <p>clicked: {{count}} times, count is {{oddOrEven2}}</p> <button @click=”increment”>+</button> <button @click=”decrement”>-</button> <button @click=”incrementIfOdd”>increment if odd</button> <button @click=”incrementAsync”>increment async</button> </div> </template>
<script> import {mapGetters, mapActions} from ‘vuex’
export default { computed: mapGetters({ //
名 称 不 一 样
oddOrEven2: ‘oddOrEven’, count: ‘count’ }),
methods: mapActions([‘increment’, ‘decrement’, ‘incrementIfOdd’, ‘incrementAsync’]) // 名 称 一 样 } </script>
<style>
</style>
想要了解跟多关于web前端培训课程内容欢迎关注尚硅谷web前端培训,尚硅谷除了这些技术文章外还有免费的高质量web前端培训训课程视频供广大学员下载学习


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)