VUEX缓存插件

VUE一般用于存储用户信息，并配合localStorage进行缓存，但这样写起来感觉非常的冗余，后期不好维护，于是一款非常好用的VUEX数据缓存诞生了：vuex-persistedstate

一、安装
npm i vuex-persistedstate --save

二、使用

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    city: "GZ",
  },
  mutations: {
    CACHE_STATE_CITY: (state, v) => (state.city = v),
  },
  plugins: [createPersistedState()],
});

三、页面操作

<template>
    <input type="text" :value="$store.state.city" @input="changeInput" />
</template>

<script>
export default {
  name: "Home",
  data() {
    return {};
  },
  methods: {
    changeInput(e) {
      localStorage
      this.$store.commit("CACHE_STATE_CITY", e.target.value);
    },
  },
};
</script>