これは、運動のミスで、それを記録します
注意:次の手順を実行しvuexログインエフェクトを使用するには(ログインしていないように、2つのログ記録用)
もともと私は、次のコード、vuexゲッターとディスプレイ上のログイン名を取得したいです
<div>
<a href="javascript:void(0)" class="navbar-link" @click="loginClick" v-show="userNameFlag">ログインする</a>
<a href="javascript:void(0)" v-show="userNameFlag"> {{}} userNameにする</a>
</ div>
<スクリプト>
輸出のデフォルト{
名: "publicHeader"、
データ(){
リターン{
ユーザ名: ''
userNameFlag:偽
};
}、
搭載:{
... mapGetters(
[
'ユーザー名'
]
)
}
}、
方法:{
ログイン(){
axios.post( '/ユーザ/ログイン'、{
ユーザー名:this.userName、
userPwd:this.userPwd
})
.then((RES)=> {
IF(res.data.status == '000'){
this.setUserID(res.data.result.userID)、
これを.setUserName(res.data.result.userName);
this.dialogFormVisible = FALSE;
this.errTittle = FALSE;
this.userNameFlag = TRUE;
}そうでなければ{
this.errTittle = TRUE;
}
})
}、
... mapMutations({
setUserName: "SET_USERNAME"、
setUserID: "SET_USERID"
})
}
}
</ SCRIPT>
その後、このアプローチは動作しないことを発見し、直接誤差を計算プロパティ「ユーザ名は」すでにデータに定義されています。
彼はのゲッターvuexを通じて得た私のページの初期化が完了した後にプロパティを計算する問題がどうあるべきかのその後の分析は、プロパティの計算はすでに始まっていたが、今回は、userNameの値は、私はすべて、セットの状態を忘れていませんではない、それは理由があり、
それから私は、脳が前にそれを考えるために、短絡、単純ではない、別の方法を考えます。コードは以下の通りであります:
<div>
href = "javascriptを:無効(0)"クラス= "ナビゲーションバーリンクを" @ = "loginClick" V-ショーをクリック= "!。この$ store.state.userName"> <aログインする</a> //直接ログインアカウント名の状態、および非表示にする表示を制御
href = "javascriptを:無効(0)" V-ショー= "$このstore.state.userName">この{{$ store.state.userName} <</ A>} //状態でログオンするためのダイレクトアクセスアカウント名、および非表示にする表示を制御
</ div>
<スクリプト>
import { mapMutations ,mapGetters } from "vuex";
import axios from 'axios';
export default {
name: "publicHeader",
data() {
return {
userName:'';//这个值是登录的时候和文本框双向数据绑定的
};
},
methods:{
login(){
axios.post('/users/login',{ //登录使用方法参数为账号和密码
userName: this.userName,
userPwd:this.userPwd
})
.then(( res )=>{
if(res.data.status == '000'){
this.setUserID(res.data.result.userID);//通过vuex 设置userID
this.setUserName(res.data.result.userName);//通过vuex 设置userName
}else {
this.errTittle = true; //账号密码错误
}
})
},
...mapMutations({
setUserName :"SET_USERNAME",
setUserID :"SET_USERID"
})
}
}
</script>
上面就是我通过去state直接获取数值,避免了上面的情况发生,当然这方法可能不是最好的,如果 各位大神有更好的办法解决,请不吝赐教!