Vue.js 数据存储和处理总结及其store.js插件和localStorage的区别

前言

• 关于对象和数组的存储
• 对象；如：

  var list = {id:001,name:"Mike",phone:"1231231"}

• 数组；如

var list = [{id:001,name:"Mike",phone:"1231231"},{id:002,name:"Peter",phone:"777777"}]

Vue.js对对象和数组的使用

• 针对对象类的数据使用；如：{{list.id}}
• 针对数组类的数据使用；使用v-for指令；如：v-for="item in list"   {{item.id}}

Store.js和localStorage的区别

• Store.js是localStorage的封装API
• 在Vue.js中的使用却不单单封装那么简单；Store可以直接获取数据并显示页面

• <template>
    <div>
      <div>{{list.name}}</div>
      <input type="button" value="测试" @click="test()">
    </div>
  </template>
  <script>
  var store = require('store')
  export default {
    data () {
      return {
        list:{}  
      }
    },
    methods: {
      test: function () {
        this.list = store.get('test')
      },
    },
    created () {
      this.list = localStorage.getItem('test')
      console.log(this.list);
    }
  }
  </script>

  

• Store.js的强大不仅仅是以上特点，它还可以获取对象指定的属性值。同样我们也通过代码来验证

• created () {
      var p  = localStorage.getItem('test')
      console.log(p.name);
      var q  = store.get('test');
      console.log(q.name);
    }

• 结果是
• （我觉得这是我一个很值得学习的知识点，之后去研究Store.js源码）

• 通过这样的简单的代码；list获取了缓存test的数据，但并没有在页面显示。但通过点下按钮执行方法通过store来获取数据可直接显示到页面上。

总结

意外下发现这样的情况特意记下来，之后要去研究Store.js的封装源代码解析，找出其中的不一样。

本人还是个小白，若有错误请大神们指导下，还得继续学习加油！