Vuejs ()---understanding Vuex

Understanding Vuex

What is Vuex?

first of all, let's analyze a scenario in which vue.js is actually developed, you have n components, and when you change the data of a component you need to change the data of the other n components, then I think you might crash the communication between the Vue components.

This time the Vuex function is coming, it can centrally manage all of the data shared by the components, so as to change one instead of all components to synchronize updates. What do you mean?

The following is illustrated in the case:

1. Rely solely on the Vue.js

2. Relies on vue.js and also uses Vuex technology.

The aim is to draw a comparison of the concepts, advantages and disadvantages of Vuex. Start now.

Suppose a tiny application has a label that shows a number, two buttons to do the number plus one and one minus the other. The user interface looks like this:

1, Pure Vue.js code:

<Scriptsrc= "Https://unpkg.com/vue/dist/vue.js"></Script><DivID= "App">  <P>{{count}}<Button@click= "Inc">+</Button>    <Button@click= "Dec">-</Button>  </P></Div><Script>NewVue ({el:'#app', data () {return{count:0}}, Methods: {Inc () { This. Count++}, Dec () { This. Count--    }  }})</Script>

The entire code structure is very clear, code is code, data is data. The code is the two function Inc, Dec, which is placed in the methods array, and is associated to the button by the @click Command. In data , an attribute countis returned, which is bound to the label p by {{count}}.

2, rely on vue.js, also used the VUEX technology

<Scriptsrc= "Https://unpkg.com/vue/dist/vue.js"></Script><Scriptsrc= "Https://unpkg.com/vuex"></Script><DivID= "App">    <P>{{count}}<Button@click= "Inc">+</Button>        <Button@click= "Dec">-</Button>    </P></Div><Script>Const Store= NewVuex.store ({state: {count:0}, mutations: {inc:state=State.count++, Dec:state=State.count--}}) Const app= NewVue ({el:'#app', computed: {count () {returnStore.state.count}}, Methods: {Inc () {Store.commit ('Inc')}, Dec () {Store.commit ('Dec')            }        }    })</Script>

What is the difference between these two?

1. The methods array is also the two methods, which is the same as the DEMO1, but the computational logic within the method is no longer done within the function, but is submitted to the store Object! This is a new object!

2. Thecount data is no longer a property of the object returned by a data function, but is returned by a calculated field, and the code within the calculated fields is not counted by itself, but is forwarded to the store object. Once again store Object!

That is to say, Vuex the data in the component and the method of changing the data out, the global management, this time when you change the component of a certain data, change the global data, then for other through Store.state.count

The resulting count data will of course change together.

Vuex is a state management model developed specifically for vue.js applications. This state self-management app contains the following sections:

• state, which drives the application's data source;
• View, which maps state to views in a declarative manner;
• actionsthat respond to changes in state caused by user input on the view.

Second, Store

The core of every Vuex application is the store(warehouse). "Store" is basically a container that contains most of the state of your app. Vuex and pure global objects have the following two different points:

1. The state store of the Vuex is responsive. When the Vue component reads state from the store , the corresponding component is effectively updated if the state in the store changes.

2. You can't directly change the status in the store . The only way to change the state in the store is to explicitly commit (commit) mutation. This allows us to easily track changes in each state, allowing us to implement tools that help us better understand our applications.

// If you are in a modular build system, be sure to call Vue.use (Vuex) at the beginning  New  vuex.store ({State  : {    0  },  mutations: {    Increment (state) {      state.count++    }   }})

Now you can store.state get the state object and trigger the state change store.commit by means of the method:

Store.commit ('increment'// - 1

Reference:

Link: What exactly is Vuex?

Think too much, do too little, the middle of the gap is trouble. Want to have no trouble, either don't think, or do more. Captain "3"

Vuejs ()---understanding Vuex