快捷導(dǎo)航

Vuex結(jié)合storage實現(xiàn)用戶信息本地存儲方式

更新時間：2022年04月29日 14:51:43 作者：五顏六色的黑

這篇文章主要介紹了Vuex結(jié)合storage實現(xiàn)用戶信息本地存儲方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

首先安裝插件庫good-storage

npm install good-storage

在你寫離線存儲邏輯部分的地方引入good-storage

盤它。吶~，吶~下面是我寫的用戶部分信息的存儲邏輯

import storage from "good-storage" ? ?//引入
const USER_DATAS="__userdatas__" ? ? ?//定義鍵值
?
//用戶信息存儲，這里傳入一個參數(shù)是個對象
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中的數(shù)據(jù)，方便在外部組建中引入數(shù)據(jù)

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 因為有可能同時修改多個用戶信息內(nèi)容，所以這里選擇使用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

<script>
import {mapGetters,mapActions} from "vuex";
export default{
?? ? data() {
?? ? ? ?return {
?? ? ? ? ?dateStr:this.userName,
?? ? ? ? ?showDate:false,
?? ? ? ? ?nickName:"",
?? ? ? ? ?revise:false,
?? ? ? ? ?showNicknameMod:false,
?? ? ? ? ?userDatasObj:{
?? ? ? ? ??? ?name:"",
?? ? ? ? ??? ?phone:'18419954234',
?? ? ? ? ??? ?sex:'',
?? ? ? ? ??? ?education:'本科',
?? ? ? ? ??? ?industry:'互聯(lián)網(wǎng)電子商務(wù)'
?? ? ? ? ?}
?? ? ? ?}
?? ? ?},
?
?? ? ?computed:{
?? ? ??? ?selectedDate(){
?? ? ??? ??? ?return this.showDate ? this.dateStr : this.userName ;
?? ? ??? ?},
?? ? ??? ?_nickName(){
?? ? ??? ??? ?if(this.revise){
?? ? ??? ??? ??? ?return this.nickName;
?? ? ??? ??? ?}else{
?? ? ??? ??? ??? ?if( !this.user_datas.name){
?? ? ??? ??? ??? ??? ?return "請輸入昵稱"
?? ? ??? ??? ??? ?}?
?? ? ??? ??? ??? ?else{
?? ? ??? ??? ??? ??? ?return this.user_datas.name
?? ? ??? ??? ??? ?}
?? ? ??? ??? ?}
?? ? ??? ?},
?? ? ??? ?_sex(){
?? ? ??? ??? ?if(!this.user_datas.sex){
?? ? ??? ??? ??? ?return "請選擇"
?? ? ??? ??? ?}
?? ? ??? ??? ?return this.userDatasObj.sex=this.user_datas.sex;
?? ? ??? ?},
?? ? ??? ?_selectEdu(){
?? ? ??? ??? ?if(!this.user_datas.education){
?? ? ??? ??? ??? ?return "請選擇"
?? ? ??? ??? ?}
?? ? ??? ??? ?return this.userDatasObj.education=this.user_datas.education;
?? ? ??? ?},
?? ? ??? ?_industry(){
?? ? ??? ??? ?if(!this.user_datas.industry){
?? ? ??? ??? ??? ?return "請選擇"
?? ? ??? ??? ?}
?? ? ??? ??? ?return this.userDatasObj.industry=this.user_datas.industry;
?? ? ??? ?},
? ? ? ??
? ? ? ? //獲取到用戶原來的信息，并進行相應(yīng)的邏輯判斷，看自己的情況哈。以上是我個人的
?? ? ??? ?...mapGetters([
?? ? ??? ??? ?"user_datas"
?? ? ??? ?])
?? ? ?},
?? ??? ?methods:{
? ??? ??? ??? ?
? ? ?? ??? ?savedInfo(){
? ? ?? ??? ??? ?this.saveUserDatas(this.userDatasObj);
? ? ?? ??? ??? ?
? ? ?? ??? ?},
?
? ? ? ? ? ? //引入action中的提交信息操作，在保存信息的時候直接調(diào)用，傳入信息對象參數(shù)
?? ??? ? ??? ?...mapActions([
?? ??? ? ??? ??? ?"saveUserDatas"
?? ??? ? ??? ?])
?? ??? ?},
?? ?}
</script>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: