Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to achieve data update between vuex and component data", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve data update between vuex and component data" can help you solve your doubts.

problem

As we all know, in the Vue component, the data of the data part can be updated synchronously with the view. If we update the data in the data, then the data on the view will be updated synchronously. This is the so-called data-driven view idea of Vue.

When we use Vuex, we can also get the data of state in Vuex through $store.state.[ dataKey] on the view, and when the data in state changes, the data on the view can be updated synchronously, which seems to be smooth.

But when we want to bind the data in state to the data of the Vue component, and then call data on the view, as follows:

{{userInfo}} export default {data () {return {userInfo: this.$store.state.userInfo;};}}

Then we will find that when we change the userInfo in state, the view will not be updated, and the userInfo in the corresponding data will not be changed, because this kind of invocation is unconventional.

When Vue initializes all the data in the data before the component is loaded, it only passively changes the data. However, after the component data is initialized, even if the data in state has changed, there is no binding relationship between the data in data and it. Data only invokes the data in state in the data initialization phase, so the data in data will not change according to the data in state.

So if you want to keep updating synchronously with the data in state on the view, you can only use the following ways:

{{$store.state.userInfo}}

Solve

So what if we have to bind data in state to data and let state drive data to change?

We can try the following two ways:

1. Use the computed property to get the data in state

Instead of calling the data in data, this approach adds a computed computed property to the component. Computed is usually used for the calculation of complex data, it is actually a function, after the budget within the function, it returns a result of the operation, and it has an important feature: when the data that needs to be budgeted within it changes, it re-operates the data and returns the result. So, we can use computed to return the data in state. When the data in state changes, computed will sense it, retrieve the data in state, and return the new value.

{{userInfo}} export default {computed: {userInfo () {return this.$store.state.userInfo;}

two。 Using watch to listen for data in state

This way is easy to understand, that is, through the watch attribute of the component, add a listener for a certain item of data in the state, trigger a listening event when the data changes, and change the corresponding data in the data in the listening event, that is, you can change the data in the data according to the data in the state in disguise.

{{userInfo}} export default {data () {return {userInfo: this.$store.state.userInfo;};}, watch: {"this.$store.state.userInfo" () {this.userInfo = this.$store.getters.getUserInfo; / / according to the specification here should use getters to obtain data} After reading this, the article "how to update data between vuex and component data" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.