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

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

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

自己學(xué)習(xí)的過(guò)程中遇到用戶新的填寫的頁(yè)面，所以就想著頁(yè)面每次刷新之后總不能一直填寫，哇，累死，所以就想到了離線存儲(chǔ)機(jī)制，這里使用的是good-storage封裝庫(kù)結(jié)合Vuex來(lái)實(shí)現(xiàn)這個(gè)功能，在此做個(gè)筆記。

首先安裝插件庫(kù)good-storage

npm install good-storage

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

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

import storage from "good-storage" ? ?//引入
const USER_DATAS="__userdatas__" ? ? ?//定義鍵值
?
//用戶信息存儲(chǔ)，這里傳入一個(gè)參數(shù)是個(gè)對(duì)象
export function saveUserData(obj){
?? ?let userDatas=storage.get(USER_DATAS,{}); ? //獲取存儲(chǔ)的值，若沒(méi)有，返回一個(gè)空對(duì)象
?? ?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;
}
?
//獲取用戶本地存儲(chǔ)的信息，如果沒(méi)有存儲(chǔ)過(guò)，返回一個(gè)空對(duì)象
export function loaduserDatas(){
?? ?return storage.get(USER_DATAS,{});
}

接下來(lái)是定義vuex的代碼部分

state.js如下

import {loaduserDatas} from "common/js/cache" ?//這里按照自己的路徑引入進(jìn)去
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對(duì)象，即用戶信息

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

actions.js 因?yàn)橛锌赡芡瑫r(shí)修改多個(gè)用戶信息內(nèi)容，所以這里選擇使用action進(jìn)行異步操作，提交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 "請(qǐng)輸入昵稱"
?? ? ??? ??? ??? ?}?
?? ? ??? ??? ??? ?else{
?? ? ??? ??? ??? ??? ?return this.user_datas.name
?? ? ??? ??? ??? ?}
?? ? ??? ??? ?}
?? ? ??? ?},
?? ? ??? ?_sex(){
?? ? ??? ??? ?if(!this.user_datas.sex){
?? ? ??? ??? ??? ?return "請(qǐng)選擇"
?? ? ??? ??? ?}
?? ? ??? ??? ?return this.userDatasObj.sex=this.user_datas.sex;
?? ? ??? ?},
?? ? ??? ?_selectEdu(){
?? ? ??? ??? ?if(!this.user_datas.education){
?? ? ??? ??? ??? ?return "請(qǐng)選擇"
?? ? ??? ??? ?}
?? ? ??? ??? ?return this.userDatasObj.education=this.user_datas.education;
?? ? ??? ?},
?? ? ??? ?_industry(){
?? ? ??? ??? ?if(!this.user_datas.industry){
?? ? ??? ??? ??? ?return "請(qǐng)選擇"
?? ? ??? ??? ?}
?? ? ??? ??? ?return this.userDatasObj.industry=this.user_datas.industry;
?? ? ??? ?},
? ? ? ??
? ? ? ? //獲取到用戶原來(lái)的信息，并進(jìn)行相應(yīng)的邏輯判斷，看自己的情況哈。以上是我個(gè)人的
?? ? ??? ?...mapGetters([
?? ? ??? ??? ?"user_datas"
?? ? ??? ?])
?? ? ?},
?? ??? ?methods:{
? ??? ??? ??? ?
? ? ?? ??? ?savedInfo(){
? ? ?? ??? ??? ?this.saveUserDatas(this.userDatasObj);
? ? ?? ??? ??? ?
? ? ?? ??? ?},
?
? ? ? ? ? ? //引入action中的提交信息操作，在保存信息的時(shí)候直接調(diào)用，傳入信息對(duì)象參數(shù)
?? ??? ? ??? ?...mapActions([
?? ??? ? ??? ??? ?"saveUserDatas"
?? ??? ? ??? ?])
?? ??? ?},
?? ?}
</script>

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

您可能感興趣的文章: