The computed property "userName" is already defined in data.

This is an exercise mistakes, record it

Note: To use a login effects vuex do the following (as a not logged in, two for logged)

Originally I wanted to get a login name on display with vuex the getter, the following code

<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>　　

Later discovered that this approach does not work, direct error The computed property "userName" is already defined in data.

Later analysis of what should be the problem of computing the property, after my page initialization is complete, the calculation of the properties had already started, but this time, userName value I have not forgotten state in the set, all he gained through getter vuex of not, that is the reason,

Then I think of another way, simpler, not short-circuit the brain to think of it before. code show as below:

<div>

　　href="javascript:void(0)" class="navbar-link" @click="loginClick" v-show="!this.$store.state.userName"> the Login <a </a> // directly state for login account name, and control the display to hide

　　href="javascript:void(0)" v-show="this.$store.state.userName"> the this {{<a. </a> $ store.state.userName}} // direct access to log on by state account name, and control the display to hide

</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直接获取数值，避免了上面的情况发生，当然这方法可能不是最好的，如果各位大神有更好的办法解决，请不吝赐教！

The computed property "userName" is already defined in data.

Guess you like