Vuex state status data source

(1) a single status tree

    Vuex a single state, with an object it contains all of the application-level status. At this point it will be a "unique data source (SSOT)" exist as. This also means that each application will store contains only one instance.

    Single state tree allows us to directly locate any particular state fragment, can easily take a snapshot of the entire current application state in the debugging process.

    Modular single state tree and not in conflict - after how the state and state change events distributed to various sub-module.

(2) state entry file injection

    By Vuex store option, provides a mechanism from the state of the root element "injected" into each sub-assembly (to be called Vue.use (Vuex)), that is introduced into the main.js file in the file, the file is added in the inside import store from './store' ;, reintroduction store global object instance vue

    

    By registering the root store options example, the store will be injected into all the examples in the root component subassembly, and the subassembly through the this. $ Store accessible.

(3) mapState helper

    Surface meaning: mapState is an auxiliary function of state say that may be difficult to understand.

    Abstract describes: mapState is the state of syntactic sugar, you probably do not understand what is called syntactic sugar. In fact here that the syntactic sugar has its own definition of what is syntactic sugar?

    Here is the understanding of syntactic sugar, use before that, I obviously already very familiar with an operation after a period of time, really fragrant!

    

   Practical effect: When a component needs to obtain multiple states when these states are declared to calculate the property will be some duplication and redundancy. To solve this problem, we can use mapState helpers help us generate calculate property, make you less press the key several times. Before using mapState, to import this helper.

import { mapState } from 'vuex'

   Then use that, here is a comparison of two ways for writing

   

(4) local state still retaining assembly

     使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

 

 

 

 .

Guess you like

Origin www.cnblogs.com/jianxian/p/11324196.html