数据持久化分析

一：从业务分析的角度来看，数据持久化是必不可少的，比如数据展示功能，一个app 用户登录和未登录都有不同的数据展示格式，那么我们从如下分析：

不登录也能使用

　　数据存储在本地　　

　　不支持同步功能

登录也能使用

　　数据存储在线上后台服务器

　　更换不同的设备可以同步数据 

 

进行这种数据传递  需要用到VueX 和本地存储

   登录成功进行这样的处理

import { mapState } from 'vuex'

computed: {
  ...mapState(['user']),
}

// 添加频道
onAddChannel(channel) {
  this.myChannels.push(channel)

  // 数据持久化处理
  if (this.user) {
    // 已登录，把数据请求接口放到服务器
    这里面写 try{

　　　}catch(err){

　　　　} 进行登录后的逻辑，封装的请求方法

  } else {
    // 未登录，把数据存储到本地
  }
}

   登录失败进行这样的处理

import { setItem } from '@/utils/storage.js'

// 添加频道
onAddChannel(channel) {
  this.myChannels.push(channel)

  // 数据持久化处理
  if (this.user) {
    // 已登录，把数据请求接口放到服务器
    console.log('1')
  } else {
    // 未登录，把数据存储到本地
    setItem('TOUTIAO_CHANNELS', this.myChannels)
  }
}

二：利用 watch 监视统一存储数据

watch: {
  searchHistories (value) {
    // 同步搜索数据到本地
    setItem('TOUTIAO_SEARCH_HISTORY', value)
  }
}

      初始化的时候从本地存储获取数据

data() {
  return {
    ....
    searchHistories: getItem('TOUTIAO_SEARCH_HISTORY') || [] // 存储历史记录
  }
}

   第二个处理方式是防止刷新数据获取为空或者没有保存的问题，也是数据持久化的一种处理方法

以上就是数据持久化的两种处理方式，有更好更多的的优化和疑问请联系