官术网_书友最值得收藏!

Saving the notes with the deep option

Now, we would like to save and restore the notes between sessions, just like we did for the note content:

  1. Let's create a new saveNotes method. Since we can't save an array of objects directly into the localStorage API (it only accepts strings), we need to convert it to JSON first with JSON.stringify:
      methods: {
        ...
  
        saveNotes () {
          // Don't forget to stringify to JSON before storing
          localStorage.setItem('notes', JSON.stringify(this.notes))
          console.log('Notes saved!', new Date())
        },
      },

Like we did for the previous content property, we will watch the notes data property for changes to trigger the saveNotes method.

  1. Add a watcher in the watch option:
      watch: {
        notes: 'saveNotes',
      }

Now, if you try to add a few tasks, you should see something like this in your console:

Notes saved! Mon Apr 42 2042 17:40:23 GMT+0100 (Paris, Madrid)
Notes saved! Mon Apr 42 2016 17:42:51 GMT+0100 (Paris, Madrid)
  1. Change the initialization of the notes property in the data hook to load the stored list from localStorage:
      data () {
        return {
          notes: JSON.parse(localStorage.getItem('notes')) || [],
          selectedId: null,
        }
      },

The newly added notes should be restored when you refresh the page. However, if you try to change the content of one note, you will notice that it doesn't trigger the notes watcher, and thus, the notes are not saved. This is because, by default, the watchers are only watching the direct changes to the target object--assignment of a simple value, adding, removing, or moving an item in an array. For example, the following operations will be detected by default:

// Assignment
this.selectedId = 'abcd'

// Adding or removing an item in an array
this.notes.push({...})
this.notes.splice(index, 1)

// Sorting an array
this.notes.sort(...)

However, all the other operations, like these, will not trigger the watcher:

// Assignment to an attribute or a nested object
this.myObject.someAttribute = 'abcd'
this.myObject.nestedObject.otherAttribute = 42

// Changes made to items in an array
this.notes[0].content = 'new content'

In this case, you will need to add the deep option to the watcher:

watch: {
  notes: {
    // The method name
    handler: 'saveNotes',
    // We need this to watch each note's properties inside the array
    deep: true,
  },
}

That way, Vue will also watch the objects and attributes recursively inside our notes array. Now, if you type into the text editor, the notes list should be saved--the v-model directive will modify the content property of the selected note, and with the deep option, the watcher will be triggered.

主站蜘蛛池模板: 天气| 保定市| 黄石市| 临西县| 洮南市| 成都市| 博白县| 丽水市| 昌图县| 富阳市| 沁水县| 奉新县| 且末县| 贺州市| 宁国市| 驻马店市| 同德县| 突泉县| 赞皇县| 舟山市| 阿克| 正阳县| 乌恰县| 虹口区| 广水市| 潼关县| 邯郸县| 丰县| 开封市| 沾化县| 康乐县| 将乐县| 河南省| 当阳市| 理塘县| 吴桥县| 娄底市| 镇坪县| 辉县市| 昭平县| 固原市|