VueのVuexはユーザIDを格納する

1、Vuexって何?
VuexはVue専用です.jsアプリケーション開発のステータス管理モード.集中型ストレージ管理アプリケーションのすべてのコンポーネントのステータスを採用し、対応するルールでステータスが予測可能な方法で変化することを保証します.Vuexはまた、Vueの公式デバッグツールdevtools extensionに統合され、ゼロ構成のtime-travelデバッグ、ステータススナップショットインポートエクスポートなどの高度なデバッグ機能を提供します.
簡単に理解すると、データを共有する場所に、データ(ステータスデータ)を格納する
2、クライアント共有データ領域:
1、Cookie領域、ブラウザ側に保存、4 kb文字列
2、ローカルストレージ:
(1)localStorage永続ストレージ5 M(2)セッションセッション
Vuexメモリリフレッシュページデータ消失
3、核心方法:
共通データをstateにカプセル化します.

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //    ，       
    user:{
      id:'',
      username:'',
      roleId:'',
      roleName:''
    },
    bool:true
  },
  mutations: {
    //     set  
    setUser:function(state,LoginUser){
          state.user=LoginUser;
    },
    setBool:function(state,b){
          state.bool=b;
    }
  },
  actions: {
    //        
    setUserAysnc:function(context,LoginUser){
         context.commit("setUser",LoginUser);
    }
  },
  modules: {
  }
})

ページで上記の方法を参照します.

<script>
export default {
    data(){
      return{
         ruleForm:{
           username:" ",
           password:" "
         }
      }
    },
    methods:{

        login:function(){
          //var _this=this;            this
          /* _this.$axios({
                      method:"post",
                      url:"http://123.57.7.108:1024/emall/login",
                      data:{
                          username:this.ruleForm.username,
                          password:this.ruleForm.password
                      }
                  }).then(function(response){
                       if(response.data.code=="200"){
                          window.localStorage.setItem("token",response.data.data.token);//      
                          _this.$message({
                               message: '    ',
                               type: 'info'
                                 });
                        }else{
                                 _this.$message({
                                   showClose: true,
                                    message: '         ',
                                    type: 'warning'
                               });
                          }
                  }).catch(function(error){
                       _this.$alert(error);
                  });*/
                  //  axios
            //data              
          this.$api.__api_login( this.ruleForm).then(data=>{
                    this.$message({
                      message:'     ',
                      type:'info'
                    });

                    //  token
                    window.localStorage.setItem("token",data.data.token);
                    //         
                    //        ，   Vuex 
                    //this.$store.commit("setUser",data.data.user);

                     //    action      
                     this.$store.dispatch("setUserAysnc",data.data.user);
                    

                    //this.$store.commit("setUser",date.date.user);
                   /* this.$router.push({
                      path:'/about',
                      query:{ 
                         name:this.ruleForm.username
                      }
                    });*/
      
                    //  name    ,   post,    
                    this.$router.push({
                      name:'About',
                      params:{
                         name:this.ruleForm.username
                      }
                    });
          }).catch(error=>{
                     this.$message({
                      message:'  catch,    ',
                      type:'info'
                    });
          });
        }
    }
}
</script>

次のページで使用できます.

<template>
  <div class="about">
    <h1>    About  </h1>
    <h4>{{this.$route.params.name}}</h4>
    <h5>
       Vuex   User  ：
      {{this.$store.state.user.roleName}}
    </h5>
  </div>
</template>