// store/index.js const LocalEvent = function(item){ // 定义一个本地存储的构造函数 this.get = function () { // 拿数据 return JSON.parse(localStorage.getItem(item)); } this.set = function (obj) { // 存数据 localStorage.setItem(item,JSON.stringify(obj)); } this.clear = function () { // 删数据 localStorage.removeItem(item); } } const local = new LocalEvent('lx_notepad'); // 创建一个本地存储的事例 const state = local.get() || { event: [], count: 0 } const mutations = { ADDEVENT(states,obj){ // ADDEVENT，添加新的事件，并存储到localStorage里 states.count++; obj.items.id = states.count; states.event.unshift(obj.items); local.set(states); } }
4.父子组件间的通讯
知识点：组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。
1）父组件可以使用 props 把数据传给子组件。
2）子组件可以使用 $emit 触发父组件的自定义事件。
代码如下：
// App.vue <template> <div> // 通过 isShow、msg 把数据传个子组件，监听自定义事件cancel、sure。 <n-dialog :is-show="dialog" :msg="tips" @cancel="dialog = false" @sure="sureDialog"></n-dialog> </div> </template> <script> import nDialog from './components/dialog.vue'; export default { data(){ return { dialog: true, tips: '清除后无法恢复，确认清除吗？' } }, components: { nDialog }, methods:{ sureDialog(){ this.$store.dispatch('clearevent'); this.dialog = false; } } } </script> // dialog.vue <template> <div :class="{'dialog-show':isShow}"> <div> <div> {{msg}} </div> <div> <button type="button" @click="cancelEvent">取消</button> <button type="button" @click="sureEvent">确定</button> </div> </div> </div> </template> <script> export default { props:['isShow','msg'], // 通过 props 属性获得父组件传递过来的数据 methods: { cancelEvent(){ this.$emit('cancel'); // 取消按钮触发父组件的 cancel 自定义事件 }, sureEvent(){ this.$emit('sure'); // 确认按钮触发父组件的 sure 自定义事件 } } } </script>
5.筛选功能
功能描述：可根据 类型 和 关键词 进行筛选
知识点：在返回所有事件的计算属性上，使用过滤器( filter )，进行对 type 和 content 的筛选，返回符合条件的事件。
代码如下：
<script> export default { data: function(){ return { screen_type: 0, // 筛选类型，0 表示不筛选 screen_title: '', // 筛选关键词，'' 表示不筛选 } }, computed:{ notapad(){ var self = this; return self.$store.state.event.filter(function(d){ // 使用过滤器 if(self.screen_type !== 0 && self.screen_title === ''){ // 只筛选类型 if( d.type === self.screen_type ){ return d; } }else if(self.screen_type !== 0 && self.screen_title !== ''){ // 筛选类型和关键词 if( d.type === self.screen_type && d.content.indexOf(self.screen_title) !== -1){ return d; } }else if(self.screen_type === 0 && self.screen_title !== ''){ // 只筛选关键词 if(d.content.indexOf(self.screen_title) !== -1){ return d; } }else{ // 不进行筛选 return d; } }); } } } </script>
总结
虽然只是做了个小小的记事本，但是我感觉收获还是很大的，很多知识点掌握得更加的牢固。这个记事本只做了一个页面，就没有用vue-router，路由也是vue里很强大的功能。
做这个记事本的初衷，是因为在工作中，我都会把最近要做的事情给记在本子上，完成之后就会打钩，所以想把这个给放到电脑上去实现。
demo下载地址：notepad_jb51.rar