Problems encountered by v-model in vue directly binding state attributes in vuex

1. Problem description

I recently ran a project and encountered such a problem. I saved a state attribute in the state of vuex. When a button is clicked, its value is changed, and then another component also uses this attribute. It needs to be bound with v-model, so I thought about binding it directly with v-model = 'this.$store.state.xxx', The result is an error, say this 属性没有定义. wrong code

2. Problem solving

The reason for the above error is because

v-model mainly provides two functions. The input value of the view layer affects the attribute value of the data, and the change of the data attribute value will update the value change of the view layer.

To put it simply v-model是和组件的data打交道的, now directly binding the state property in vuex will cause an error.

So the solution is to save the state property in vuex in the computed property of the component, and then bind it to v-model

correct code