State, getters, mutations, actions, modules.

  • 1. State: basic data of vuEX, used to store variables

  • 2. Geeter: Data derived from basic data (state), which is equivalent to the calculated attribute of state

  • 3. Mutation: Method of submitting updated data, which must be synchronous (action is used if asynchronous is required). Each mutation has a string event type (type) and a callback function (handler). The callback function is where we actually make the state change, and it takes state as the first argument and the commit payload as the second.

  • 4. Action: performs much the same functionality as mutation, except that == 1. Action commits mutation instead of directly changing the state. 2. Action can contain any asynchronous operation.

  • Modules: VuEX allows each module to have its own state, mutation, action and getters, making the structure very clear and easy to manage.

    Dispatch (‘ mutations method name ‘, value); commit: Hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty hasty This.store.com MIT (‘mutations ‘, value)

    Or the import {mapGetters, mapMutations mapState, mapAction} from 'vuex mapMutations and mapAction in the methods to extend out... MapAction (["one","two"]/{"one":"o1","two":" T2 "}), mapGetters and mapState are expanded in computed... mapState(['num']) ... mapGetters(['userInfo'])Copy the code

Usage Scenarios:

Vuex is more used to address cross-component communication and centrally store data as a data center.

More complex scenarios, such as multi-tier component nesting, are better handled with VUex

1. Globally shared data between components

2. Data requested asynchronously through the back end may be to solve communication problems between multiple nested components, or to better manage complex state relationships in an application