vuex修改状态管理

package-lock.json

@@ -13903,6 +13903,11 @@
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
+    },
     "w3c-hr-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",

package.json

@@ -14,7 +14,8 @@
     "element-ui": "^2.3.3",
     "vue": "^2.5.2",
     "vue-axios": "^2.1.1",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/main.js

@@ -9,6 +9,7 @@ import ElementUI from 'element-ui'
 import '../node_modules/element-ui/lib/theme-chalk/index.css'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import store from './store'
 // import  '//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css'
 
 Vue.config.productionTip = false
@@ -18,6 +19,7 @@ Vue.use(VueAxios,axios)
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>',
   

src/store/index.js

@@ -0,0 +1,52 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex);
+
+import {mapState} from 'vuex';
+export default new Vuex.Store({
+    state:{
+      regshow:2,
+      userstatus:2,
+      username:'',
+      Authorization:'',
+    },
+    mutations:{
+      showstatus(state){
+        state.userstatus = 1;
+      },
+      hidestatus(state){
+        state.userstatus = 2;
+      },
+      
+      // clear
+      cleartoken(state){
+        state.Authorization = '';
+      },
+      clearuser(state){
+        state.username = '';
+      },
+      // get
+      getstatus(state){
+        state.userstatus = sessionStorage.getItem('usertip');
+      },
+      getregshow(state){
+        state.regshow = sessionStorage.getItem('regshow');
+      },
+      getusername(state){
+        state.username = sessionStorage.getItem('username');
+        console.log(state.username)
+      },
+      user_name(state){
+        if(state.username == ''){
+          state.username = sessionStorage.getItem('username');
+        }
+        console.log('eeee');
+        return state.username
+      }, 
+    },
+    getters: {
+        reg_show:state=>state.regshow,
+        userstatus:state=>state.userstatus,
+      },
+
+})

src/views/brokers/nHeader.vue

@@ -8,7 +8,7 @@
 					<div class="left nav-title"><p>首页</p></div>
 				</router-link>
 				<div class="left nav-title active"><p>申请经纪商</p><i class="hot">HOT</i></div>
-				<div class="right" v-show='usertip==2'>	
+				<div class="right" v-show='$store.getters.userstatus==2'>	
 					<router-link to='/'>
 					<div class="nav-log">注册</div>
 					</router-link>
@@ -16,8 +16,8 @@
  					<div class="nav-register">登陆</div>
 					</router-link>
 				</div>
-				<div class="user" v-show='usertip==1'>
-					<span><img src="../../../static/img/usericon2.png"><p>{{username}}</p></span>
+				<div class="user" v-show='$store.getters.userstatus==1'>
+					<span><img src="../../../static/img/usericon2.png"><p>{{$store.state.username}}</p></span>
 					<span @click='toLoginOut()'><img src="../../../static/img/logout2.png"><p>退出</p></span>
 				</div>	
 			</div>
@@ -27,7 +27,7 @@
 
 <script>
 	
-
+	import {mapState} from 'vuex';
 	export default{
 		data(){
 			return{
@@ -36,13 +36,31 @@
 				Authorization:'',
 				regshow:2,
 			}
+		},
+		computed:{
+			user_token: function(state){
+        if(state.Authorization == ''){
+          state.Authorization = sessionStorage.getItem('token_code');
+        }
+        return state.Authorization
+      },      
+      user_name: function(state){
+        if(state.username == ''){
+          state.username = sessionStorage.getItem('username');
+        }
+        console.log('eeee');
+        return state.username
+      }, 
+		},
+		watch:{
+
 		},
 		methods:{
 			toLoginOut: function(){
 				this.axios({
 					method: 'get',
      		  url: 'https://dev407.33.cn/api/member/loginout',
-     		  headers: {Authorization: this.Authorization}
+     		  headers: {Authorization: this.user_token}
 				}).then((res)=>{
 					const result = res.data;
 						if(result.code!=200){
@@ -58,9 +76,11 @@
 								type:'success'
 							})
 							this.regshow=2;
-							this.usertip=2;
+							this.usertip=2;							
 							this.username='';
 							this.Authorization='';
+							this.$store.commit('hidestatus');
+							this.$store.commit('cleartoken');
 							sessionStorage.setItem('regshow',this.regshow);
 							sessionStorage.setItem('usertip',this.usertip);
 							sessionStorage.setItem('username',this.username);
@@ -69,18 +89,12 @@
 						}
 				})
 			},
-			changemsg: function(){
-				this.regshow = sessionStorage.getItem('regshow')? sessionStorage.getItem('regshow'):2;
-				this.usertip = sessionStorage.getItem('usertip')? sessionStorage.getItem('usertip'):2;
-				this.username = sessionStorage.getItem('username')? sessionStorage.getItem('username'):'';
-				this.Authorization = sessionStorage.getItem('token_code')? sessionStorage.getItem('token_code'):'';
-			}
-		},
-		watch:{
-			'$route':'changemsg'
 		},
 		mounted(){
-			this.changemsg();
+			this.$store.commit('getstatus');
+			// this.$store.commit('user_name');
+			// this.$store.getters.user_name;
+			// this.$store.commit('getregshow');
 		}
 	}
 </script>

src/views/home/contTwo.vue

@@ -13,19 +13,15 @@
 						<h4>{{msg.title1}}</h4>
 						<h5>{{msg.tip1}}</h5>
 						<p>{{msg.detail1}}</p>
-						<img :src="msg.src1">
-						<router-link to='/apply'>
-							<div class="apply-btn" v-show='msg.hover1==true'>立即申请经纪商<span>></span></div>
-						</router-link>
+						<img :src="msg.src1">						
+						<div class="apply-btn" v-show='msg.hover1==true' @click="apply()">立即申请经纪商<span>></span></div>
 					</div>
 					<div class="box right" @mouseenter='msg.hover2=true' @mouseleave='msg.hover2=false'>
 						<h4>{{msg.title2}}</h4>
 						<h5>{{msg.tip2}}</h5>
 						<p>{{msg.detail2}}</p>
 						<img :src="msg.src2">
-						<router-link to='/apply'>
-							<div class="apply-btn" v-show='msg.hover2==true'>立即申请经纪商<span>></span></div>
-						</router-link>
+						<div class="apply-btn" v-show='msg.hover2==true' @click="apply()">立即申请经纪商<span>></span></div>
 					</div>
 				</div>	
 			</div>
@@ -57,6 +53,8 @@
 	export default{
 		data(){
 			return{
+				regshow:2,
+				applyreturn:'',
 				boxList:[
 				{
 					title1:'超高返佣',
@@ -84,6 +82,27 @@
 				}
 				]
 			}
+		},
+		methods:{
+			apply: function(){
+        this.$store.commit('getusername');
+        this.applyreturn = sessionStorage.getItem('applyreturn')
+        // console.log(this.applyreturn);
+        if(this.regshow==4){
+          if(this.applyreturn!='undefined'){
+          	console.log(this.applyreturn);
+            this.$router.push({path:'/verify'});
+          }else{
+            this.$router.push({path:'/apply'});
+          }
+        }
+        else{
+          this.$router.push({path:'/apply'});
+        }
+      },
+		},
+		mounted(){
+			this.regshow = sessionStorage.getItem('regshow')? sessionStorage.getItem('regshow'):2;
 		}
 	}
 </script>

src/views/home/mBanner.vue

@@ -320,8 +320,7 @@
           {
             car:'car-3'
           }
-        ],
-        telarea:[],
+        ],        
         part1:[
           {
             clist:'1 、数字资产市场是全新的、未经确认的，而且可能不会增长。目前，数字资产主要由投机者大量使用，零售和商业市场使用相对较少。因此，数字资产价格易产生波动，并进而对数字资产投资产生不利影响。'
@@ -397,6 +396,7 @@
             clist:'数字货币可能存在矿工预挖、庄家操控、团队解散、技术缺陷等问题，其价格波动较大，可能发生资产归零的风险。因此我们强烈建议您在自身能承受的风险范围内参与数字货币交易。请注意止盈止损，合理评估风险，请勿投入高于个人承受能力的金额！ 最终解释权归FX66所有。FX66感谢有您的陪伴！'
           }
         ],
+        telarea:[],
         applyform:{},
       }
     },
@@ -424,6 +424,7 @@
         }
       },
       apply: function(){
+        this.$store.commit('getusername');
         if(this.regshow==4){
           if(this.applyform.company!=undefined){
             this.$router.push({path:'/verify'});
@@ -506,12 +507,13 @@
               })
               this.username = result.data.username;
               this.usertip = 1;
-              this.regshow = 4;
+              this.regshow = 4;              
               this.Authorization = 'Bearer '+result.data.access_token;
               sessionStorage.setItem('regshow',this.regshow);
               sessionStorage.setItem('usertip',this.usertip);
               sessionStorage.setItem('username',this.username);
               sessionStorage.setItem('token_code',this.Authorization);
+              this.$store.commit('showstatus');
               console.log('登陆成功');
               this.loadapplymsg();
             }
@@ -571,19 +573,6 @@
                       message: result.message,
                       type:'warning',
                     })
-                    const LogForm = this.loginform;
-                    // console.log(LogForm);
-                    LogForm.type = Form.type;
-                    LogForm.area = Form.area;
-                    LogForm.password = Form.password;
-                    LogForm.mobile = Form.mobile;
-                    LogForm.email = Form.email;
-                    // console.log(LogForm);
-                    const logparam = new URLSearchParams();
-                    for (let item in LogForm){
-                      logparam.append(item,Form[item]);
-                    }
-                    console.log(logparam);
                   }else{
                     this.$notify({
                     title:'成功',
@@ -621,16 +610,6 @@
                       console.log('登陆成功');
                     }
                     })
-
-                    // this.username = this.regform.email!=''? this.regform.email:this.regform.mobile;
-                    // this.usertip = 1;
-                    // this.regshow = 4;
-                    // this.Authorization = 'Bearer '+result.data.access_token;
-                    // sessionStorage.setItem('regshow',this.regshow);
-                    // sessionStorage.setItem('usertip',this.usertip);
-                    // sessionStorage.setItem('username',this.username);
-                    // sessionStorage.setItem('token_code',this.Authorization);
-                    // console.log('注册成功')
                   }
                 })
               }
@@ -757,6 +736,7 @@
         this.Authorization = sessionStorage.getItem('token_code')? sessionStorage.getItem('token_code'):'';
       },
       applyRoute: function(){
+        this.$store.commit('getusername');
         if(this.regshow==4){
           if(this.applyform.company!=undefined){
             this.$router.push({path:'/verify'});
@@ -772,6 +752,7 @@
         this.axios.get('https://dev407.33.cn/api/broker/applystatus',{headers:{Authorization: this.Authorization}}).then((res)=>{
           console.log(res.data.data.info);
           this.applyform = res.data.data.info;
+          sessionStorage.setItem('applyreturn',this.applyform.company);
         }).catch((err)=>{
           console.log(err);
         })