// src/store/actions.js import * as types from './mutation-types' export default { addTotalTime({ commit }, time) { commit(types.ADD_TOTAL_TIME, time) }, decTotalTime({ commit }, time) { commit(types.DEC_TOTAL_TIME, time) }, savePlan({ commit }, plan) { commit(types.SAVE_PLAN, plan); }, deletePlan({ commit }, plan) { commit(types.DELETE_PLAN, plan) } };
我们的 actions 其实就是去触发事件和传入参数啦
加了这三个文件后我们的store终于完整了，更新下我们的代码
// src/store/index.js 完整代码 import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './actions' Vue.use(Vuex); const state = { totalTime: 0, list: [] }; export default new Vuex.Store({ state, mutations, actions })
this.$store.dispatch('savePlan', plan) 当执行了这样的方法就会调用 actions.js 里的 savePlan 方法，而 savePlan 又会触发 mutations 里的 types.SAVE_PLAN 最后修改数据视图更新
PS：在这有个技巧就是，在 mutations 里都是用大写下划线连接，而我们的 actions 里都用小写驼峰对应。
个人理解这其实就是一个发布订阅的模式
mutation-types 记录我们所有的事件名
mutations 注册我们各种数据变化的方法
actions 则可以编写异步的逻辑或者是一些逻辑，再去 commit
我们的事件
如果有 getter 我们可以把一些需要处理返回的数据放在这即可，不进行业务操作
最后别忘了在我们的 main.js 里使用我们的 store
// src/store/main.js import store from './store' // ... var app = new Vue({ el: '#app', router, store, ...App, });
开始体验下你自己的任务计划板吧！
最后
通过本文，我们可以学习到许多关于vue的特性。
1.了解了vue-cli脚手架
2.初步对webpack有了一些了解和认识
3.如何用.vue愉快的开发
4.使用vuex进行组件通信
5.路由（子路由）的应用
6.使用 vue-devtools 观察我们的数据
github地址： https://github.com/MeCKodo/vu...