使用vuex存储用户信息到localStorage的实例
1、首先需要装vuex
npminstallvuex-d
2、新建store文件夹，新建index.js，并引入vue、vuex,代码如下：
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
constkey='user'
conststore=newVuex.Store({
state(){
return{
user:null
}
},
getters:{
getStorage:function(state){
if(!state.user){
state.user=JSON.parse(localStorage.getItem(key))
}
returnstate.user
}
},
mutations:{
$_setStorage(state,value){
state.user=value
localStorage.setItem(key,JSON.stringify(value))
},
$_removeStorage(state){
state.user=null
localStorage.removeItem(key)
}
}
})
exportdefaultstore
3、在main.js中引入store,
importstorefrom'./store/index'
newVue({
el:'#app',
router,
store,//引入store
components:{App},
template:'
4、在登录组件中，如代码所示：
this.$message({
message:'登录成功',
type:'success'
})
this.$store.commit('$_setStorage',{user:this.loginForm.username})
this.$router.push({name:'Home'})
5、储存其他状态类信息，方式相同。
以上这篇使用vuex存储用户信息到localStorage的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。