vue封装本地存储模块

最新推荐文章于 2024-06-21 14:29:11 发布

熊抱抱的一粒

最新推荐文章于 2024-06-21 14:29:11 发布

阅读量518

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_52959651/article/details/120760061

版权

本文介绍了如何在Vue.js项目中封装一个本地存储模块。通过创建utils文件夹内的storage.js文件，详细阐述了实现存储和读取信息的方法，并讨论了在Vuex中如何引入和使用该模块。

摘要由CSDN通过智能技术生成

首先在项目中新建utils文件夹，再创建storage.js文件，这个文件就是封装本地存储的页面

storage.js

// 本地存储模块
// 获取
export const getItem=(name,value)=>{
    // 未经处理的请求数据
    const data=window.localStorage.getItem(name)  
    try {
        // 将data转为js对象
      return JSON.parse(data)
    } catch (error) {
      return data  
    }
  
}
// 存储
export const setItem=(name,value)=>{
    // 如果value是对象，把value转为json字符串存储
    if (typeof value==='object') {
        value=JSON.stringify(value)
    }
    window.localStorage.setItem(name,value)
}
// 删除
export const removeItem=name=>{
    window.localStorage.removeItem(name)
}

在vuex中引入模块

import Vue from 'vue'
import Vuex from 'vuex'
//引入模块
import {getItem,setItem} from '@/utils/storage'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  //使用模块中的方法
    user: