<template> <div> <h1>我的备忘录</h1> <p> <strong> <router-link to="/time-entries">创建一个计划</router-link> </strong> </p> </div> </template>
2）.计算计划总时长组件：Sidebar.vue
<template> <div> <div> <h3>所有计划的总时长: {{ time }} 小时</h3> </div> </div> </template> <script> export default { computed: { time() { return this.$store.state.totalTime } } } </script>
3）.计划列表组件：TimeEntries.vue
<template> <div> <router-link v-if="$route.path !== '/time-entries/log-time'" to="/time-entries/log-time"> 创建 </router-link> <div v-if="$route.path === '/time-entries/log-time'"> <h3>新的计划</h3> </div> <hr> <router-view></router-view> <div> <p v-if="!plans.length"><strong>还没有任何计划(┬＿┬)，快去创建吧ヽ(●-`Д´-)ノ</strong></p> <div> <a v-for="(plan,index) in plans"> <div> <div> <img :src="plan.avatar" /> <p> <strong> {{ plan.name }} </strong> </p> </div> <div> <p> <span>计划总时间：</span> {{ plan.totalTime }} </p> <p> <span>开始时间：</span> {{ plan.date }} </p> </div> <div> <p>备注信息：{{ plan.comment }}</p> </div> <button @click="deletePlan(index)"> X </button> </div> </a> </div> </div> </div> </template> <script> export default { name : 'TimeEntries', computed : { plans () { return this.$store.state.list } }, methods : { deletePlan(idx) { // 减去总时间 this.$store.dispatch('decTotalTime',this.plans[idx].totalTime) // 删除该计划 this.$store.dispatch('deletePlan',idx) } } } </script>
4）.新增计划组件：LogTime.vue
<template> <div> <div> <div> <label>开始日期:</label> <input type="date" v-model="date" placeholder="Date" /> </div> <div> <label>总时间 :</label> <input type="number" v-model="totalTime" placeholder="Hours" /> </div> </div> <div> <div> <label>备注 :</label> <input type="text" v-model="comment" placeholder="Comment" /> </div> </div> <button @click="save()">保存</button> <router-link to="/time-entries">取消</router-link> <hr> </div> </template> <script> export default { name : 'LogTime', data() { return { date : '', totalTime : '', comment : '' } }, methods:{ save() { const plan = { name : 'eraser', image : 'https://pic.cnblogs.com/avatar/504457/20161108225210.png', date : this.date, totalTime : this.totalTime, comment : this.comment }; this.$store.dispatch('savePlan', plan) this.$store.dispatch('addTotalTime', this.totalTime) this.$router.go(-1) } } } </script>
2、vuex中用来存储数据的划分为：
1）.初始化vuex.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 })
State: 单一状态树，用一个state对象包含了全部的应用层级状态，代码中只new 了一次store实例 Vuex.Store。
2）.负责触发事件和传入参数：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) } };
实践中，我们会经常会用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：
actions: { increment ({ commit }) { commit('increment') } }
3）.注册各种数据变化的方法: mutations.js