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

这是一次练习中所犯的错误，记录一下

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