Vuex: [Vue warn] :계산된 속성 "사용자 이름"이 할당되었지만 설정자가 없습니다.

Vuex: [Vue warn] :계산된 속성 "사용자 이름"이 할당되었지만 설정자가 없습니다.

글로벌 vuex 상태에서 사용자 이름, 비밀번호 및 인증 부울을 설정 및 취득하여 조건부로 일부 요소를 네비게이션바에 렌더링하려고 합니다.데이터를 전달할 로그인 컴포넌트를 다음에 나타냅니다.

<template>
  <div class="login" id="login">
    <b-form-input
      id="inputfield"
      v-model="username"
      type="text"
      placeholder="username">
    </b-form-input>
    <b-form-input
      id="inputfield"
      type="password"
      v-model="password"
      placeholder="password">
    </b-form-input>
    <b-button @click="login()" id = "inputfield" variant="outline-success">
      Login
    </b-button>
  </div>
</template>

<script>
  export default {
    name: 'login',
    computed: {
      username () {
        return this.$store.state.username
      },
      password () {
        return this.$store.state.password
      },
      loggedIn () {
        return this.$store.state.loggedIn
      }
    },
    methods: {
      login () {
        this.$store.dispatch('login', {
          username: this.username,
          password: this.password,
          isAuthed: true // just to test
        })
      }
    }
  }
</script>

단, 입력 필드에 아무것도 입력하면 Vue는 해당 필드에 경고를 보냅니다(상태는 갱신되지 않습니다).

[Vue warn]: Computed property "username" was assigned to but it has no setter.

계산된 속성과 함께 v-model을 사용하고 있으므로 실제로 입력 이벤트가 발생할 때 계산된 속성을 업데이트하려고 합니다.

따라서 계산된 속성에 대한 세터가 있어야 합니다.

Vuex 상태를 사용하려고 하면 계산된 속성에 대한 설정기가 저장소에 돌연변이를 커밋할 수 있습니다.

computed: {

  username : {
    get () {
      return this.$store.state.username
    },
    set (value) {
      this.$store.commit('updateUsername', value)
    }
  },

  password : {
    get () {
      return this.$store.state.password
    },
    set (value) {
      this.$store.commit('updatePassword', value)
    }
  },

  ...

},

스토어에 대응하는 변환이 필요합니다.다음은 예를 제시하겠습니다.

mutations: {

  updateUsername (state, username) {
    state.username = username
  },

  updatePassword (state, password) {
    state.username = password
  },

  ...

}

상세한 것에 대하여는, 다음의 Vuex 문서의 설명을 참조해 주세요.https://vuex.vuejs.org/en/forms.html

---

로그인 버튼에 대해 액션을 디스패치하려고 합니다.스토어에서 부울 값만 설정하려는 경우 다음과 같이 액션을 디스패치할 수 있습니다.

methods: {
  login () {
    this.$store.dispatch('login', true)
  }
}

...그리고 나서, 당신의 스토어에서 커밋할 대응 액션과 변환이 필요합니다.

mutations: {
  login (state, value) {
    state.isAuthed = value
  }
},

actions: {
  login ({ commit }) {
    commit('login')
  }
}

액션에 관한 문서는 다음과 같습니다.https://vuex.vuejs.org/en/actions.html

이게 도움이 됐으면 좋겠어요.

언급URL : https://stackoverflow.com/questions/47460765/vuex-vue-warn-computed-property-username-was-assigned-to-but-it-has-no-set