在vue中使用vuex和sessionStorage保存用戶名

安裝 vuex

npm install vuex --save

vuex安裝完成之後，構建如下目錄：

main.js文件下注冊：

//實例化 store
import store from './vuex/store.js'

new Vue({
  el: '#app',
  store,   //實例化 store
  router,
  components: { App },
  template: '<App/>'
});

vuex中幾個文件詳情如下：

store.js

在store.js中目前保存一個數據，就是當前用戶的名字

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as  mutations from './mutations'
import * as actions from './actions'

Vue.use(Vuex);

export default new Vuex.Store({
//const store = new Vuex.Store({
  //定義狀態
 state:{
   currentUser:null,   //當前用戶
  // isLogin:false    //判斷當前用戶是否已經登錄
 },
  getters,
  mutations,
  actions
});

//export default store

getters.js

export const currentUser = state=> state.currentUser
//export const isLogin = state=> state.isLogin

mutations.js

//更改用戶狀態信息
export const userStatus=(state,user)=>{
  if (user){
    state.currentUser = user
//    state.isLogin = true
  }else if(user==null){
    //退出的時候清空sessionStorage裏的東西
    sessionStorage.setItem('userName',null);
  //  sessionStorage.setItem('userToke','');
    state.currentUser = null;
  //  state.isLogin = false;
  }
}

actions.js

//應用mutation
export const setUser = ({commit},user) =>{
  commit('userStatus',user)
}

在用戶登錄的時候，我們就需要將用戶名存放入sessionStorge，再由sessionStorage傳入vuex中。

  this.$ajax.post(meadiaurl.url+'/FH_AM6/api/login/toLogin',
              this.$qs.stringify({
                USERNAME:this.name,
                PASSWORD:this.password
              })
       )
         .then((res)=>{
           let code = res.data.code
           if(code==200){
             this.$Message.success('登錄成功');
             this.$router.push("/main/recommend/webmedia");
             //將用戶名放入sessionStorage
             sessionStorage.setItem('userName',this.name);
             //將用戶名放入vuex
            this.$store.dispatch('setUser',this.name);
           }else {
             this.$Message.error('賬號或密碼不正確');
           }
         }).catch(()=>{
         this.$Message.error('獲取失敗');
       })

在你需要顯示的用戶名中輸出：

this.$store.state.currentUser

        <div>
          <h4>{{this.$store.state.currentUser}}</h4>
        </div>

每當刷新頁面的時候，就會從sessionStorage中查詢是否有userName的存在,如果沒有則跳向登錄頁面

    methods:{
        isLogo() {
          if (sessionStorage.getItem('userName')) {
            this.$store.commit('userStatus',sessionStorage.getItem('userName'))
          }else{
            this.$router.push("/logo");
          }
        }
      }

以上是本章全部內容