vuex状态管理
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)) }) }