vuex中state存属性
state存放多种状态属性
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state : {
token : '',
use : ''
},
mutations: {
set_token(state, token) {
state.token = token
sessionStorage.token = token
},
del_token(state) {
state.token = ''
sessionStorage.removeItem('token')
}
},
actions: {
},
modules:{
}
})
状态管理使用多属性进行登录组件与个人中心组件的自由切换
通过应用state属性进行实例化
<router-link to="/userLogin" v-if="use===''">登录</router-link>
<!-- <a href="/userLogin">登录</a>-->
<!-- <el-button type="primary" plain v-if="use===''">还未登录,点击(<a href="/userlogin">登录</a>)</el-button>-->
<!-- <el-button type="primary" plain v-else>欢迎<a href="/onlyuser">点击进入个人主页</a></el-button>-->
<!-- <router-link to="/userRegister" v-if="use===''">注册</router-link>-->
<router-link to="/onlyUser" v-else>个人中心</router-link>
created() {
this.use = this.$store.state.use
// if (this.use === '' && this.$route.path !== '/userlogin') {
//
// }
}
homepageClick() {
if (this.ruleForm.email === '1018703239@qq.com' && this.ruleForm
.pass === '123') {
this.$message.success('登录成功')
this.$store.state.use = '1'
console.log(this.$store.state.use)
this.$router.push('/Home')
} else {
this.$message.error('登陆失败')
}
},
登录组件对state状态属性实例化应用
页面刷新时vuex的信息保存倒sessionstorage中
话不多说,直接上代码,实现页面刷新vuex数据得到保存
created() {
let sessionStorage = window.sessionStorage;
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}