Vuex: [Vue warn]: Computed 属性 "username" was assigned to 但它没有 setter
Vuex: [Vue warn]: Computed property "username" was assigned to but it has no setter
我正在尝试从全局 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 和计算 属性,因此您实际上是在尝试更新计算 属性 当 input 事件触发。
因此,您需要为计算属性设置 setter。
当您尝试使用 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
希望对您有所帮助。
我正在尝试从全局 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 和计算 属性,因此您实际上是在尝试更新计算 属性 当 input 事件触发。
因此,您需要为计算属性设置 setter。
当您尝试使用 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
希望对您有所帮助。