今天总结一些工作经验
1.各个组件数据的共享
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。而且也会导致代码难以维护
解决方法：采用vuex进行状态管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
每一个 Vuex 应用的核心就是 store（仓库）。"store" 基本上就是一个容器，它包含着应用中大部分的状态(state)。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化。
代码如下(以一个user module为例)：
//vuex/modules/user.js import api from '../../fetch/api' import * as types from '../types' const state = { // 用户登录状态 loginStatus: JSON.parse(localStorage.getItem('loginStatus')) || false, } const actions = { /** * 用户登录 */ setUserInfo({ commit }, res) { localStorage.setItem('loginStatus', true) commit(types.SET_LOGIN_STATUS, true) }, /** * 退出登录 */ setSignOut({ commit }) { localStorage.removeItem('loginStatus') commit(types.SET_LOGIN_STATUS, false) }, } const getters = { loginStatus: state => state.loginStatus } const mutations = { [types.SET_LOGIN_STATUS](state, status) { state.loginStatus = status } } export default { state, actions, getters, mutations } //User.vue <template> <div class="user"> <div v-if="!loginStatus"> ... </div> <div v-else> ... </div> </div> </template> <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters([ 'loginStatus' ]) } } </script>
2.时间选择组件(要可选择时间段)
规则：
- 默认值为：开始日期在后天，结束日期在第六天
- 今天以前不可选择
- 点击某个日子，则将最近的节点移动过
- 如果离两个节点一样，则将开始日期移动过去
- 两个节点也可选到1天里；显示为各一半
一开始打算在github上搜索一个然后直接拿来用，发现都是不符合我的设计，所以打算自己撸一个，(不要怂，撸起袖子就是干)。
终于经过几个晚上的奋战写出来了(期间遇到了各种坑)。
代码就不贴出来了 代码传送门
总结
虽然只是做了个小小的个人项目，但是我感觉收获还是很大的，很多知识点掌握得更加的牢固，对 vue全家桶 的理解又更深了一些。这个项目还没有完成，后期将不定期更新，敬请期待。。
好了，溜了溜了。。。
