vue3.0---实现列表缓存功能

1.实现思路

• 在store的index.js里定义saveLocalData方法，用来存储本地缓存数据。会用到localstorage.setItem(‘localData’, payload)
• 在所有需要增加，删除，修改的地方调用saveLocalData方法，也就是数据变化，就需要将数据重新存储。
• 存储完成之后，就要用，那么定义一个getLocalData()的方法，用来读取存储的数据，localStoreage.getItem(‘localData’)
• 读取成功之后，就要把数据用到列表里呀。在获取store.state.dataList的地方，做判断，如果localData有值，那么就将localData的值赋值给store.state.dataList.如果没有，那么就用默认的store.state.dataList的数据即可。
• 将localData赋值的过程，也需要在store的index.js里定义一个将数据存储的方法。
• 总体的思路就是，但凡数据变动，操作方法都需要将其放到store 的index.js里，统一处理，会避免很多乱七大八糟的问题

具体代码如下：
detail.vue

<template>
  <div class="wrap">
    <nav-header @addList="addListFn"></nav-header>
    <nav-main
      :list="list"
      @delList="delListFn"
      @checkboxFn="checkboxFn"
    ></nav-main>
    <nav-footer :list="list" @delAllList="delAllListFn"></nav-footer>
  </div>
</template>
<script>
import NavHeader from "@/components/navHeader/navHeader";
import NavMain from "@/components/navMain/navMain";
import NavFooter from "@/components/navFooter/navFooter";
import { defineComponent, computed, onMounted, ref } from "vue";
import { useStore } from "vuex";
import {ElMessage } from 'element-plus'
// computed 计算属性
export default defineComponent({
  name: "home",
  components: {
    // 当key,value相等的情况下，NavHeader:NavHeader,省略成NavHeader
    NavHeader,
    NavMain,
    NavFooter,
    ElMessage
  },

  setup(props, ctx) {
    console.log(ctx);
    let store = useStore();
    let getLocalDataFn = () => {
      let data = localStorage.getItem("localData");
      console.log(data);
      if (data != null) {
        return JSON.parse(data);
      } else {
        return [];
      }
    };
    let list = computed(() => {
      if (getLocalDataFn().length) {
        store.commit("setDataList", getLocalDataFn());
      }
      return store.state.dataList;
    });

    let addListFn = (val) => {
      let flag = true;
      list.value.map((item, index) => {
        if (item.title == val) {
          flag = false;
          // alert("数据已存在");
         ElMessage.success('数据已存在');
          return;
        }
      });
      flag && store.commit("addOption", { title: val, complete: false });
      store.commit("saveLocalData", JSON.stringify(store.state.dataList));
    };
    let delListFn = (val) => {
      store.commit("delOption", val);
      store.commit("saveLocalData", JSON.stringify(store.state.dataList));
    };
    let delAllListFn = (val) => {
      console.log(val);
      store.commit("delAllOption", val);
      store.commit("saveLocalData", JSON.stringify(val));
    };
    let checkboxFn = () => {
      store.commit("saveLocalData", JSON.stringify(store.state.dataList));
    };
    return {
      list,
      addListFn,
      delListFn,
      delAllListFn,
      getLocalDataFn,
      checkboxFn,
    };
  },
});
</script>
<style scoped lang="scss">
.wrap {
  width: 300px;
  margin: 0 auto;
  background: #fafafa;
  padding: 30px;
}
</style>

store的index.js

import { createStore } from 'vuex'

export default createStore({
 
  state: {
     // 初始化状态
    dataList:[
      {title:'吃饭',complete:true},
      {title:'睡觉',complete:false},
      {title:'打豆豆',complete:false},
    ]
  },
  mutations: {
    setDataList(state, payload){
      state.dataList = payload
    },
    //同步修改state 都是方法
    // 第一个参数 state 第二个参数，需要修改的值
    // 搜索文本框中，如果搜索内容没有，则添加到列表里，如果有，则显示已存在。
    addOption(state, payload){
      state.dataList.push(payload)
      console.log(state.dataList)
    },
    // 数据列表里删除按钮，点击后删除此条数据
    delOption(state, payload){
      state.dataList.splice(payload,1)
      console.log(state.dataList)
    },
    // 清除已选按钮，点击后，清空列表
   delAllOption(state, payload){
     state.dataList=payload
     console.log(state.dataList)
   },
   saveLocalData(state, payload){
     localStorage.setItem('localData',payload)
   },
  },
  actions: {
    // 异步提交mutation
    // 第一个参数， store 第二个参数是修改的值
    asyncDataList(store, params){
      //commit来调用mutation，actions里方法不可以直接修改state,store里只有mutation可以修改state
      // commit 第一个参数是所需要调用 的mutations的方法，params是修改的值
      store.commit('setDataList', params) 
    }
  },
  modules: {
    // 模块化
  }
})