Vuex结合storage实现用户信息本地存储方式

目录

• 首先安装插件库good-storage
• 在你写离线存储逻辑部分的地方引入good-storage
• 接下来是定义vuex的代码部分
• 在外部组件中的操作如下

自己学习的过程中遇到用户新的填写的页面，所以就想着页面每次刷新之后总不能一直填写，哇，累死，所以就想到了离线存储机制，这里使用的是good-storage封装库结合Vuex来实现这个功能，在此做个笔记。

首先安装插件库good-storage

npm install good-storage

在你写离线存储逻辑部分的地方引入good-storage

盘它。呐~，呐~下面是我写的用户部分信息的存储逻辑

import storage from "good-storage"    //引入
const USER_DATAS="__userdatas__"      //定义键值
 
//用户信息存储，这里传入一个参数是个对象
export function saveUserData(obj){
    let userDatas=storage.get(USER_DATAS,{});   //获取存储的值，若没有，返回一个空对象
    if(obj.phone){
        userDatas.phone=obj.phone;
    }
    if(obj.name){
        userDatas.name=obj.name;
    }
    if(obj.sex){
        userDatas.sex=obj.sex;
    }
    if(obj.education){
        userDatas.education=obj.education;
    }
    if(obj.industry){
        userDatas.industry=obj.industry;
    }
    storage.set(USER_DATAS,userDatas);
    return userDatas;
}
 
//获取用户本地存储的信息，如果没有存储过，返回一个空对象
export function loaduserDatas(){
    return storage.get(USER_DATAS,{});
}

接下来是定义vuex的代码部分

state.js如下

import {loaduserDatas} from "common/js/cache"  //这里按照自己的路径引入进去
const state={
    user_datas:loaduserDatas()       //获取到用户信息
}
export default state

getters.js 映射state中的数据，方便在外部组建中引入数据

export const user_datas = state => state.user_datas;

mutation-types.js    

export const SET_USERDATA="SET_USERDATA"

mutaion.js提交修改之后的obj对象，即用户信息

import * as types from "./mutation-types.js"
const mutations={
    [types.SET_USERDATA](state,obj){
        state.user_datas=obj
    }
}
export default mutations;

actions.js 因为有可能同时修改多个用户信息内容，所以这里选择使用action进行异步操作，提交mutation

//同样按照自己的目录引入所需文件
 
import {saveUserData} from "common/js/cache"
import * as types from "./mutation-types.js"
export const saveUserDatas=function({commit},obj){
    commit(types.SET_USERDATA,saveUserData(obj))
}

在外部组件中的操作如下

我的文件是datum.vue

datum.vue 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。