VueUse (Chinese) - core function: State related functions

• VueUse official address

一、createGlobalState

• Keep state globally for reuse across Vue instances

1. No persistence (stored in memory)

• For example:
  
• or
  

2. Persistent storage

• Use useStorage()stored in localStorage:
• For example:
  
• Components use:
  

二、createInjectionState

• Create global state that can be injected into components

三、createSharedComposable

• Make a composable function available to multiple Vue instances.
  

Four, useAsyncState

• Responsive asynchronous state, mostly axiosused in combination with network requests
  

五、useDebouncedRefHistory

• useRefHistory Shorthand for , with stabilization and filtering
• This function takes a snapshot of the counter after 1000ms when the value of the counter starts to change.
  

六、useLastChanged

• Record the timestamp of the last change
  

七、you are in ManualRefHistory

• When invoked , a history of changes commit()is tracked , and undo and redo functionality is provided.ref
• useRefHistoryThe difference with is that the history of changes useRefHistoryis automatically tracked instead of manually tracked.refuseManualRefHistory
  

Eight, useRefHistory

• record a refchangelog

1. Use

• Tracks the history refof changes to and also provides undo and redo functionality
  

• Internally, watchused to reftrigger a history point when a value is modified.

• tickThis means that history points trigger batch modifications asynchronously in the same .
  

• Can be used to undoreset the ref value to the last point in history.
  

2、Objects / arrays

• When working with objects or arrays, since changing their properties doesn't change the reference, no commit is triggered.
• Passing is required to track property changes deep: true. It will create clones for each history.
  

3. Historical storage capacity

• By default (unlimited) all history is kept until they are manually cleared, the maximum amount of history to keep can be set via the capacity option.
  

4. History refresh time

• 来自Vue的文档:Vue's reactivity system buffers invalidation effects and flushes them asynchronously to avoid unnecessary repeated calls when many state mutations occur in the same "tick".
• As watchwith , flushthe refresh time can be modified using the option.
  
• The default value is " pre" to make this composable consistent with Vue watchers' defaults. This also helps to avoid common problems such as multiple history points generated as part of a multi-step update of a reference value that could break application state invariants. Can be used in commit()case tickmultiple history points need to be created in the same " ".
  
• On the other hand, when flush 'sync'using , you can use to batch(fn)generate a single history point for multiple synchronous operations
  

九、useLocalStorage

• Responsive version LocalStorage
• useStoragesame as using

10. useSessionStorage

• Responsive version SessionStorage
• useStoragesame as using

Eleven, useStorage

• Responsive version LocalStorage/SessionStorage

1. Use

2. Merge default values

• By default, useStorage will use the value from storage.
• Note that when adding more properties to defaults, the key may be undefined if the client store doesn't have it.
  
• To fix this, you can enable mergeDefaultsthe option.
  
• When set to mergeDefaults: true, it will perform a shallow merge on objects.
• You can pass a function to perform a custom merge (such as a deep merge), for example:
  

3. Custom serialization

• By default, useStoragethe appropriate serializer will be smartly used based on the data type of the default value provided.
• For example, JSON.stringify / JSON.parsewould be for objects, Number.toString / parseFloatfor numbers, etc.
• You can also provide your own serialization function to useStorage
  
• Note that when you provide null as a default value, useStorageno data type can be assumed from it.
• In this case, you can provide a custom serializer or explicitly reuse the built-in serializer.
  

Twelve, useStorageAsync

• Reactive storage that supports asynchronous
• useStoragesame as using

Thirteen, useThrottledRefHistory

• useRefHistoryShorthand for with throttling filter
• This function takes the first snapshot immediately after the counter value changes, and takes the second snapshot after a delay of 1000 milliseconds.