Vueプロジェクトはlocal Storrage+Vuexを使ってユーザー登録情報を保存します。
2505 ワード
本論文の例では、Vueはlocal Strage+Vuexを使ってユーザー登録情報を保存する具体的なコードを共有しています。
appi.js
appi.js
import axios from 'axios'
const baseURL = 'http://XXX
// axios
axios.defaults.baseURL = baseURL
//
const loginCheck = params => {
return axios.post('/login', params).then(res => {
return res.data
})
}
export { loginCheck }
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const actions = {}
const mutations = {
handleUserName: (state, user_name) => {
state.user_name = user_name
// localStorage , , vuex , ( )
localStorage.setItem('user_name', user_name)
}
}
const state = {
user_name: '' || localStorage.getItem('user_name')
}
// getters state
const getters = {
userName: (state) => state.user_name
}
const store = new Vuex.Store({
actions,
mutations,
state,
getters
})
export { store }
login.vue
methods:{
login(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
//
loginCheck(this.form).then(res=>{
// console.log(res);
// , , , token localstorage , vuex Home
if(res.meta.status === 200){
//
this.$message({
message: res.meta.msg,
type: 'success'
});
var that = this;
//
setTimeout(function(){
that.$router.push({name:'Home'})
},1000)
localStorage.setItem('token',res.data.token)
// vuex Home
this.$store.commit('handleUserName',res.data.username);
}else{
// ,
this.$message({
message: ' ,'+res.meta.msg,
type: 'error'
});
}
})
} else {
return false;
}
});
}
}
Home.vue
,{{$store.getters.username}}
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。