How to ensure the responsiveness of state dynamically adding attributes in vuex and solve the problem that deep watch / calculated monitoring vuex state object attribute changes do not take effect

1, How does vuex's state ensure its responsiveness

But the premise is: the defined in advance will be added to the responsive system. Can the added attributes or objects be added to the responsive system?

The answer is: No, but if you add and delete attributes in the specified way, you can be responsive.

For example, now I want to add a new attribute height, which can be added in two ways, as follows:

1. Method 1: this method can add the attribute of the object in state, but it cannot be added to the responsive system, that is, it will not be displayed on the page. In fact, this attribute does exist

mutations: { addheight(state){ state.stus[0]['height'] = 168 } }

2. Method 2: this method allows attributes to be added to the responsive system

mutations: { addheight(state){ Vue.set(state.stus[1],'height',178) //Parameter 1 is the object and parameter 2 is the object key,Parameter is value } }

3. Method 3: reassign the old object with the new object (described below)

4. After adding attributes, delete them. To delete attributes and join the responsive system, do the following:

mutations: { delheight(state){ Vue.delete(state.stus[1],'height') //Parameter 1 is the object and parameter 2 is the object key } }

5. Summary:

(1) The state in Vuex's store object is responsive. When the data in the state changes, the vue component will update automatically.

(2) However, it has a precondition, which is consistent with the response premise we know before, that is, it needs to define the required initialization attributes in state in advance. Dynamically added properties cannot be responsive.

(3) How to ensure the responsiveness of dynamically added attributes - there are two ways

Method 1: use Vue.set(obj, key, value)

Method 2: use the new object to re assign the value to the old object

(4) Delete an existing attribute in state. The delete + attribute cannot satisfy the response type. You must use Vue.delete(obj, attribute name)

2, Solve the problem that the state object attribute in the computed listening vuex does not take effect

First, we need to understand a premise:

When the computed property listens for an object, if the reference address of the object does not change, computed will not detect it.

For example, if the value corresponding to a key in an object changes, computed cannot detect it

// Original writing export default { namespaced: true, state: { info:{ other: {} } }, mutations: { addInformation(state,info){ let data = Object.assign(state.info, info); //here state.info The value of has changed, but the reference address has not changed state.shareInformation = data; }, } }

The target object using Object.assign() is still state.info, so although its value has changed, the reference address has not changed, so computed cannot detect it.

// Correct writing addInformation(state,info){ //Create a new object state.info，Info Copy object to new object let data = Object.assign({},state.info,info); //take state.info Reference address to the new object state.info = data; },

The target object using Object.assign() is an empty object. The contents of the two source objects state.info and info are copied to the new object, so its value and reference address change. In this way, computed can detect.

3, vue about the problem that deep watch can't monitor the change of vuex state object

In short, if there is an empty object {} in vuex state, there will be a problem in listening. You must have an initialization attribute defined in advance to ensure listening. So what if you can't determine the key of dynamically adding attributes? Give the solution first:

// Simple copy let _reply = JSON.parse(JSON.stringify(state.reply)) // Add dynamic properties orderId It's changing _reply[orderId] = data.orderId
// Update, only such a wave of operation can make computed and watch Listening. state.reply = _reply

The specific reason is actually the same as in Chapter 2. We should ensure that the reference address changes.

12 November 2021, 00:14 | Views: 3164