1.vuex的存储和ssession的存储
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
user_uid:'',
user_token: '',
user:{photo:''},
},
mutations: {
SESS_USER(state,user_uid){
state.user_uid=user_uid;
sessionStorage.setItem('user_uid', user_uid);
},
ADD_TOKEN(state,token){
state.user_token=token;
sessionStorage.setItem('user_token', token);
},
USER_ADD(state,user){
state.user=user;
sessionStorage.setItem('user', JSON.stringify(user));
},
PHOTO_ADD(state,photo){
state.user.photo=photo;
sessionStorage.setItem('user', JSON.stringify(state.user) );//存在ssession中需要是json类型
},
SIGN_OUT (state) { //退出,删除状态
sessionStorage.removeItem("user_uid");
sessionStorage.removeItem("user_token"); //移除sessionStorage
sessionStorage.removeItem("user");
state.user_uid=''; //同步的改变story中的状态
state.user_token='';
state.user={};
},
},
//外部访问 this.$store.store.user
actions: {
addUser({commit}, user) {
commit('USER_ADD', {user});
},
},
modules: {
}
})
export default store
vuex的调用
let res={
name:'',
like:'',
.......
user_token:'',
userInfo:''
}
this.$store.commit('SESS_USER',res.uid);//存对象
this.$store.commit('ADD_TOKEN',res.user_token);//存token
this.$store.commit("USER_ADD",res.userInfo);//存
session取值
JSON.parse(sessionStorage.getItem('user'))//取session值对象
sessionStorage.getItem('user_token')//字符串
vuex取值
this.$store.store.user
this.$store.store.user_token
注:当vuex存储的信息,在页面强刷时会丢失,可以在sessionStorage中拿取