一些Vue缓存处理

为了更好的缓存，想出一个小小的设计思路，用来处理 Vuex 和 localStorage 数据的绑定，并且能够根据页面的操作来进行自动更新，并反馈到页面上。

必备知识

Vuex State、Mutations、Action、getter,使用和原理
Vue 计算属性、生命周期、响应原理和局限等等。
localStorage。

准备工作

对 localStorage 封装。

export default {
  get(key) {
    let val = localStorage.getItem(key);
    if (!val) {
      return null;
    }
    //考虑只存数组情况
    if (val.substr(0, 1) === "{" || val.substr(0, 1) === "[") {
      return JSON.parse(val);
    } else {
      return val.split(",");
    }
  },
  set(key, data) {
    data instanceof Set && (data = [...data]);
    localStorage.setItem(key, JSON.stringify(data));
  },
  remove(key) {
    //删除逻辑要进行获取判断验证
    localStorage.removeItem(key);
    return this.get(key) === null ? true : false;
  },
  clear() {
    localStorage.clear();
  }
};

助手函数

 //根据id 在数组中查找数据 返回 是否存在,所在位置,详细信息
  hasIdByArr(arr = [], id) {
    let a = { has: false, index: undefined, data: [] };
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].id == id) {
        a.has = true;
        a.index = i;
        a.data = arr[i];
        break;
      }
    }
    return a;
  },

主要思想

获取的阶段

在一个需要用到缓存的组件的时候，我在生命周期的beforeCreate阶段去获取一下 Vuex 中Mutations的一个方法，这个方法就是去获取localStorage的需要的属性值，把它赋值为State。

这样设计，不会在初次加载的时候就获取所有的缓存数据，只有在使用的时候才会去获取。去提取localStorage在Create阶段获取也一样，但是我感觉应该和页面的数据获取分开，因为操作的是 Vuex 所以在beforeCreate阶段也是可以的。

这样 Vuex 中就有了需要的缓存值。页面展示的时候，直接使用 Vue 的计算属性获取就可以了，如果你想要筛选数据就可以使用 Vuex 的getter。
例如：

//在 created 阶段获取一个传值的 getter
const { onceCount, onceStar } = this.$store.getters.getOnceCart(this.id);
this.count = onceCount;
this.favorite = onceStar;

// 在 getter 中的定义
getOnceCart: ({ cart, star }) => id => {
  return {
    onceCount:
      cart.filter(val => val.id == id).length > 0
        ? cart.filter(val => val.id == id)[0].count
        : 0,
    onceStar: star.filter(val => val.id == id).length > 0 ? true : false
  };
};

因为当前的页面缓存属性，需要你先去让获取后才会有，所以需要等数据获取后才能去 getter 筛选，所以在创建阶段赋值。

设置阶段

在页面渲染后，我们可能会对页面进行操作，从未触发页面的缓存修改。

在 Vuex 方面
使用 mutations 去提交修改 State 和 localStorage。

 changeStar({ star }, news) {
    star = news;
    storage.set("star", star);
  },

使用 Action 对组件提交过来的数据进行处理和拦截，然后抛给 mutations 保存

  pushStarData({ commit }, news) {
      const { starData, status } = news;
      const { id } = starData;
      let old = this.state.star || [];
      const { index, has } = help.hasIdByArr(old, id);
      if (status) {
        old.push(starData);
      } else {
        old.splice(index, 1);
      }
      commit("changeStar", old);
    },

在组件中的使用

 changeFa() {
      let { count, checkBox, ...starData } = this.getCartData()
      starData.time = this.$help.getUTCTime();
      starData.specifications = this.specifications;
      this.$store.dispatch('pushStarData', { starData, status: this.favorite });
    }

总结

总的来说就是在一个组件使用的时候去请求 Vuex 把 localStorage 的数据保存到 State 中，组建可以使用计算属性或 vuex 的 getter 去筛选或直接获取数据。
在页面操作的时候，使用 dispatch 提交需要缓存的数据,在 Vuex 中的 action 中去修改，处理，拦截等操作，完成后去提交 mutations，mutations 同步修改 vuex 和 localStorage。这个设计完全符合 Vue 的响应模式，修改的只是 Vuex 的 State 而已，页面的属性是计算属性或 getter 动态获取的，页面能够直接响应修改。

注意

在涉及到 form 的时候，比如 checkBox ,使用 change 事件较好，如果使用监听器，会在首次就去触发一次修改，因为你这个组件的默认值和你的缓存值不一样，这时也会触发修改的。