学习vue(二） localStorage存储

h5 localStorage：实现本地存储 

vue todolist案例（实现刷新页面，数据仍然存在）

新建一个vue项目，在App.vue同级目录下新建store.js文件，同时在App.vue中引入Store import Store from '.store'

新建文件 store.js 

const STORAGE_KEY = 'todos-vuejs'
export default  {
  fetch () {
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
  },
  save (todos) {    // watch所监听的函数名称
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
  }
}

文件 App.vue 

import Store from './store'
  console.log(Store)      // 存在两个方法，一个fetch,一个save
  export default {
    name: 'App',
    data() {        // es6语法 和 function data(){return {message:''}} 性质一样
      return{
        message: '',
        todos: Store.fetch()        // 查看localStorage中fetch方法，如果存在数据直接渲染，反之是个空数组
      }
    },
    watch: {                       // 监听todos
      todos: {
        handler: function (todos) {
          Store.save(todos)
        },
        deep: true
      }
    },
    methods: {                // 调用的方法
      onEnter: function(){
        this.todos.push({todo: this.message, isfinish: false});
        this.message = '';
      },
      finishFn: function(todo){
        todo.isfinish =! todo.isfinish;
      }
    }
  }