vue vue-router vuex element-ui axiosエージェントプラットフォームの学習ノートを書く(9)現存する問題を解決する

最初の質問
ログインのログインステータスを管理するためにvuexを使用できるようになりましたが、this.$store.dispatch('logout')の方式はmainに書きます.jsの中で発効することができなくて、実はこれはまったく問題ではありませんて、私があまりにも愚かです......
実はそうですjsはjsファイル、main.jsもjsファイルです.私はもうstoreを持っています.jsはmainに導入された.jsの中、まさかstore.jsの中の方法はmainです.jsの中ではまだ有効ではありませんか?有効でなければxxxxです.vueの中ではもっと発効することはできないので、これは一葉の障壁で泰山が見えないのではないでしょうか.通常の論理でstore.jsはmainです.jsの中にあるのでactionを配布します.thisは全く必要ありません.$store.xxxxxああ、直接storeを書きます.xxxxxでいいよ、this.$store自体がグローバルvueファイルに使用されるグローバルメソッドです
だからjsはこう書けばいい
これによりログイン中にアドレスバー/loginでもアイコンがまだ存在する問題は発生しません
そのままログインボタンになってしまうのが普通です
2番目の質問
ログインしていない状態で私のワークベンチページにアクセスすると、直接ログインページにジャンプしますが、ログインする必要があります.そうしないと、ユーザーがこのシステムに問題があると思っている場合は、ログインする必要があります.
開くvue、コードの追加
3番目の質問
まずログインします
そしてF 5でページを更新します
ログインステータスはなくなりましたが、ログインする必要がある個人情報のページにページが残っています.
出荷管理をクリックするともっと不思議です
私は確かに出荷管理ページにいますが、ログインするべきだとヒントを与えました.それは今ログイン状態ですか、それとも非ログイン状態ですか.
この場合、次のようになります.
sessionStorageの中のuserはまだ存在し、removeの操作を実行していませんが、ページをリフレッシュするとstoreの中の状態はすべて初期状態に戻りました(ログインしていない状態、個人情報はすべて空です)【
これで私の疑問も解決しました.ページをリフレッシュするとstoreの中の状態が初期化されます.
私が今このような状況になったのは、ルーティングジャンプを検証する際に使用した判断がsessionStorageにuserがあるかどうかを判断し(このときsessionStorageにuserが入っているのでsendページにアクセスできる)、storeの中のloginedが真偽であるかどうかをヒントに書きます(初期state、logined=fasleなので登録すべきだとヒントになります)
これは証拠だ
これはmainです.jsでジャンプを検証するために使いました
これはheaderです.vueではヒントの判断を書きます(loginedはstoreの中の状態です)
問題は見つかったが、私たちはどのように解決すればいいのだろうか.
ポイント:sessionStorageにuserが存在するか否かをログインするか否かの判断として、ユーザーがページを更新して再度ログインすることはできないでしょう(この操作をリフレッシュするのはまだ頻繁です)
storeを書き換えstoredの論理から解決するしかありません

1、storeの中の初期状態は私たちが指定することができなくて、sessionStorageの中のuserを探しに行くべきで、それからどのように書くかまだ考えていないで、一歩一歩

に来ます
開けてjs
たくさん書いても成功しなかったので,ちょっと休んでから書きます.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//       
const state = {
  // //         
  // logined: false,
  // //       ,     avatar name,   username    
  // LoginedUser: {
  //   name: '',
  //   avatar: '',
  //   username: ''
  // }
  /*      ，         */

  //                 , vue data          return  
  state () {
    //               
    let user = sessionStorage.getItem('user')
    let logined = false
    let LoginedUser = null
    if (user) {
      LoginedUser = JSON.parse(user)
      logined = true
      return {logined, LoginedUser}
    } else {
      return {logined, LoginedUser}
    }
    // return new Promise((resolve, reject) => {
    //   let user = JSON.parse(sessionStorage.getItem('user'))
    //   let logined = false
    //   let LoginedUser = null
    //   // let hasUser = () {}
    //   if (user) {
    //     LoginedUser = JSON.stringify(user)
    //     logined = true
    //     resolve({logined, LoginedUser})
    //   } else {
    //     resolve({logined, LoginedUser})
    //   }
    // })
  }
}
//          
const mutations = {
  //           2 ，         ，      
  //          ???
  //   
  LOGIN (state) {
    //            
    state.logined = true
    //    sessionStorage     
    let user = sessionStorage.getItem('user')
    state.LoginedUser = JSON.stringify(user)
    //          
    // state.LoginedUser.name = user.name
    // state.LoginedUser.avatar = user.avatar
    // state.LoginedUser.username = user.username
  },
  //   
  LOGOUT (state) {
    //     
    state.logined = false
    // state.LoginedUser.name = ''
    // state.LoginedUser.avatar = ''
    // state.LoginedUser.username = ''
  }
}
//     actions    mutations    
const actions = {
  //         LOGIN     login 
  //   context     ，        
  login ({commit}) {
    commit('LOGIN')
  },
  //     logout
  logout ({commit}) {
    commit('LOGOUT')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})