2021-10-29

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))
    })
  }