Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how Vuex combines storage to achieve local storage of user information". In daily operation, I believe many people have doubts about how to combine Vuex with storage to achieve local storage of user information. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to combine Vuex with storage to achieve local storage of user information". Next, please follow the editor to study!

First install the plug-in library good-storagenpm install good-storage to introduce good-storage where you write the offline storage logic

Disk it. Here is the storage logic of part of the user information that I wrote.

Import storage from "good-storage" / / introduces const USER_DATAS= "_ userdatas__" / / defines the key value / / user information store, where the parameter is an object export function saveUserData (obj) {let userDatas=storage.get (USER_DATAS, {}); / / gets the stored value. If not, an empty object if (obj.phone) {userDatas.phone=obj.phone is returned. } 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 } / / get the information stored locally by the user. If it has not been stored, an empty object export function loaduserDatas () {return storage.get (USER_DATAS, {}) is returned;} next is the part of the code that defines vuex

State.js is as follows

Import {loaduserDatas} from "common/js/cache" / / here introduce const state= {user_datas:loaduserDatas () / / get user information} export default state according to your own path.

Getters.js maps data in state to facilitate the introduction of data in external builds

Export const user_datas = state = > state.user_datas

Mutation-types.js

Export const SET_USERDATA= "SET_USERDATA"

Mutaion.js submits the modified obj object, that is, user information

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

Actions.js may modify multiple user information contents at the same time, so here we choose to use action for asynchronous operation and submit mutation.

/ / also import the required files 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))} in the external component according to your own directory.

My file is datum.vue.

Datum.vue

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:' undergraduate' Industry:' Internet E-commerce'}, computed: {selectedDate () {return this.showDate? This.dateStr: this.userName;}, _ nickName () {if (this.revise) {return this.nickName } else {if (! this.user_datas.name) {return "Please enter nickname"} else {return this.user_datas.name} _ sex () {if (! this.user_datas.sex) {return "Please select"} return this.userDatasObj.sex=this.user_datas.sex }, _ selectEdu () {if (! this.user_datas.education) {return "Please select"} return this.userDatasObj.education=this.user_datas.education }, _ industry () {if (! this.user_datas.industry) {return "Please select"} return this.userDatasObj.industry=this.user_datas.industry;}, / / get the original information of the user, and make the corresponding logical judgment, depending on your own situation. The above is my personal... mapGetters (["user_datas"])}, methods: {savedInfo () {this.saveUserDatas (this.userDatasObj) }, / / introduce the submit information operation in action, call it directly when saving the information, and pass in the information object parameter. MapActions (["saveUserDatas"])},} at this point, the study on "how Vuex combines storage to realize local storage of user information" is over. I hope I can solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.