這是一次練習中所犯的錯誤，記錄一下
情況說明：要使用vuex 做一個登錄效果如下（一為未登錄，二為已登錄）
最初是想用vuex的getter獲取登錄名進行展示，代碼如下
<div>
<a href="javascript:void(0)" class="navbar-link" @click="loginClick" v-show="userNameFlag">Login</a>
<a href="javascript:void(0)" v-show="userNameFlag">{{userName }}</a>
</div>
<script>
export default {
name: "publicHeader",
data() {
return {
userName:''
userNameFlag:false
};
},
mounted:{
...mapGetters(
[
'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);
this.setUserName(res.data.result.userName);
this.dialogFormVisible = false;
this.errTittle = false;
this.userNameFlag = true;
}else {
this.errTittle = true;
}
})
},
...mapMutations({
setUserName :"SET_USERNAME",
setUserID :"SET_USERID"
})
}
}
</script>
后來發現這個辦法行不通，直接報錯The computed property "userName" is already defined in data.
后來分析了一下，應該是計算屬性的問題，在我這個頁面初始化完成的以后，計算屬性就已經開始執行，而這個時候，userName這個值我還沒有忘state中設置，所有他通過vuex的getter獲取不到，這就是原因所在，
后來想了另外一種辦法，更簡單，之前腦子短路沒有想起來。代碼如下：
<div>
<a href="javascript:void(0)" class="navbar-link" @click="loginClick" v-show="!this.$store.state.userName">Login</a>//直接通過state獲取登錄賬號名稱，並控制顯示隱藏
<a href="javascript:void(0)" v-show="this.$store.state.userName">{{ this.$store.state.userName }}</a>//直接通過state獲取登錄賬號名稱，並控制顯示隱藏
</div>
<script>
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直接獲取數值，避免了上面的情況發生，當然這方法可能不是最好的，如果 各位大神有更好的辦法解決，請不吝賜教！