Vuex localStorage cannot be updated in real time for the first time

needs to do a real-time update

for example, after the current user chooses to hang orders, update the number of orders in the header from time to time

implement

with vuex and localStorage

Code:

store

call

describe the problem:
the first time you hang an order, there will be no update to the header

but after the refresh, there has been a time

if you hang the order again, it will be updated in real time.

want to know why.

if you have any details you want to know, you can always say

Vue.js localstorage vuex

Aug.12,2021

the main problem is that vuex is not used properly. The reason why one case is updated in real time is that during initialization, an array containing an object is obtained through this.$store.getters.GET_STORAGE. This number is returned after taking localStorage, in getters and directly assigning to the store object (, which does not create a responsive update ). When the this.gDList is assigned in created, The actual subsequent update operation push is modified in the data of the current instance and has nothing to do with the store, so it will be updated in real time.

Please do not try to change the store, in getters. If you need to use localStorage, you can get the value in the created of main.js, and then commit- > SET_STORAGE.
Please do not use this.gDList for assignment, push, etc. Instead, use the get _ STORAGE attribute directly through mapGetters. All update operations are triggered by action to change the value of store.state.gdListd. If you need push, use an ADD_STORAGE_ITEM, in commit and then update the push, trigger response in mutation.

Previous: How to judge whether there is a number 31 in a certain time interval

Next: Froge uploads rvt files