vuex动态绑定

之前在前端里我用了很多：

window.location();

这种代码，由于：

import router from "./router";

// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {

  if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限

    const token = sessionStorage.getItem("myToken")
    // console.log("------------" + token)

    if (token) { // 判断当前的token是否存在 ； 登录存入的token
      if (to.path === '/login') {

      } else {
        next()
      }
    } else {
      next({
        path: '/login'
      })
    }
  } else {
    next()
  }
})

对路由改变做了拦截，在配置了requireAuth的页面，如果没有登录会直接跳转登录页面。这导致我最后在后台点击退出登录，正常情况是会路由到博客列表的第一页，然后强制刷新一下来取消掉登录状态，这时候强制刷新，就会直接跳到登录页面了。经过抉择，我还是改写了所有的登录流程。我在vuex里加了一个hasLogin的状态数据：

import Vue from 'vue'
import Vuex from 'vuex'
import menus from "./modules/menus"


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    myToken: '',
    myUserInfo: JSON.parse(sessionStorage.getItem("myUserInfo")),
    users: [],
    hasLogin: false
  },
  mutations: {
    // set
    SET_TOKEN: (state, token) => {
      state.myToken = token
      sessionStorage.setItem("myToken", token)
    }
    ,
    SET_USERINFO: (state, userInfo) => {
      state.myUserInfo = userInfo
      sessionStorage.setItem("myUserInfo", JSON.stringify(userInfo))
    },

    SET_USERS: (state, users) => {
      state.users = users
    },

    SET_LOGIN: (state, login) => {
      state.hasLogin = login
    },

    REMOVE_INFO: (state) => {
      state.myToken = ''
      state.myUserInfo = {}
      sessionStorage.setItem("myToken", '')
      sessionStorage.setItem("myUserInfo", JSON.stringify(''))
      sessionStorage.setItem("wsBlogId", '')
      state.users = []
      state.hasLogin = false
    }

  },
  getters: {
    // get
    getUser: state => {
      return state.myUserInfo
    },
  },
  actions: {
  },
  modules: {
    menus
  }
})

在登录的时候，把这个状态改为true，就可以了。当然，最最重要的还是注意vuex里的数据想要双向绑定，需要写到computed里：

<template>
  <div class="maction">
    <div v-if="hasLogin">
      <span><el-link @click="init" type="primary" style="font-size: large">主页</el-link></span>
      <el-divider direction="vertical"></el-divider>
      <span><el-link type="success" @click="add" style="font-size: large">发表博客</el-link></span>
      <el-divider direction="vertical"></el-divider>
      <span><el-link type="warning" @click="backStage" style="font-size: large">进入后台</el-link></span>
      <el-divider direction="vertical"></el-divider>
      <span><el-link type="danger" @click="logout" style="font-size: large">退出</el-link></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginStatus",
  data() {
    return {
      user: {
        username: '',
        avatar: ''
      },
    }
  },
  methods: {

    init() {
      this.$router.push('/blogs/1')
    },

    add() {
      this.$router.push('/blog/add')
    },

    backStage() {
      this.$router.push('/sys/')
    },


    logout() {
      const _this = this
      _this.$axios.get("/logout", {
        headers: {
          "Authorization": sessionStorage.getItem("myToken")
        }
      }).then(res => {
        _this.$store.commit("REMOVE_INFO")
      })
    }
  },
  created() {
    if(this.$store.getters.getUser) {
      this.user.username = this.$store.getters.getUser.username
      this.user.avatar = this.$store.getters.getUser.avatar
      this.hasLogin = this.$store.state.hasLogin	
    }
  },

  computed: {
    hasLogin: {
      get() {
        return this.$store.state.hasLogin
      },
      set(val) {
        this.$store.state.hasLogin = val
      }
    }
  },


}
</script>

<style scoped>
.maction {
  margin: 3% 0;
  text-align: center;
}

</style>