Vuex overview

1. How components share data

  • Ancestor component Provide/inject Value for descendant component

  • Parent to child: V-bind attribute binding

  • Child to parent: V-ON event binding

  • Sharing data between sibling components: EventBus

    $on The component that receives the data $emit the component that sends the data

2. What is Vuex

Vuex is a mechanism to implement global state (data) management of components and facilitate data sharing among components

3. Benefits of unified state management using Vuex

  1. Centralized management of shared data in VUEX for easy development and maintenance
  2. It can efficiently realize data sharing between components and improve development efficiency
  3. The data stored in VUEX is responsive and keeps the data in sync with the page

4. What kind of data is suitable to store in Vuex

In general, only data shared between components is necessarily stored in VUEX;

For private data in the component, it is still stored in the component’s own data.

Basic use of Vuex

1. Install the VUEX dependency package

 npm install vuex --save
Copy the code

Import the VUex package

 import vuex from 'vuex'
 Vue.use(Vuex)
 
Copy the code

3. Create a Store object

Const store = new vuex. store ({// state: {count: 0}})Copy the code

4. Mount the Store object to the Vue instance

Render: h => h(App)}).$mount('# App ') render: h => h(App)}Copy the code

The core concept of Vuex

Overview of Core Concepts

The key concepts in Vuex are as follows:

  • State
  • Mutation
  • Action
  • Getter

State

1.State improves the unique public data source. All shared data should be stored in the State of Store.

Const store = new vuex. store ({state: {count: 0}})Copy the code

2. The first way for a component to access data in State:

This.$store.state. Global data name // Add: in template this can be omitted {{$store.state. Global data name}}Copy the code

3. A second way for components to access data in State:

Import {mapState} from 'vuex' import {mapState} from 'vuex'Copy the code

Use the mapState function you just imported to map global data needed by the current component to computed properties of the current component:

// 2. Map global data to the computed property of the current component, computed: {... mapState(['count']) }Copy the code

Mutation

Mutation is used to change data in the Store

  • Store data can only be changed by mutation, but data in Store cannot be manipulated directly

  • This is a slightly more cumbersome way to operate, but you can monitor all data changes centrally

    Mutation export default new vuex. Store({state: {count: 0}, mutations: {add(state) {// state of the change state.count++}}}) {handle1() {// First way to trigger mutation this.code.store.mit ('add')}}Copy the code

Mutations can trigger the transfer of parameters:

Mutation export default new vuex. Store({state: {count: 0}, mutations: {add(state, step) {// change status state.count += step}}}) {handle2() {use this. code. store.mit ('addN', 3)}}Copy the code

Commit simply calls a mutation function

The second way to trigger mutation is:

MapMutations} import {mapMutations} from 'vuex'Copy the code

Based on the imported mapMutations function, map the required mutations function to the methods of the current component:

2. map the specified mutations function to the methods function of the current component (methods: {... MapMutations (['add','addN']) handle1() {this.add()}}Copy the code

Note: do not perform an asynchronous operation in the mutations function

Action: Used to process asynchronous tasks

If the data is changed by an asynchronous operation, it must be changed through an Action instead of Mutation, but the data must be changed indirectly by triggering Mutation in the Action.

Mutations: {add(state) {state.count++}}, actions: {addAsync(context) {setTimeout(()=> {// In actions, you cannot directly modify data in state; Context.com MIT ('add')}, 1000)}}}) $store. Dispatch ('addAsync')}} $store. Dispatch ('addAsync')}}Copy the code

Note: Only the function defined in mutations has the power to modify the data in state

An asynchronous actions task is triggered with parameters:

Open mutations: Action export default new vuex. Store({state: {count: 0}, mutations: { addN(state, step) { state.count += step } }, actions: {addNAsync(context, step) {setTimeout(()=> {context.com MIT ('addN', step)}, 1000)}}}) $store. Dispatch ('addAsync', 3)}}Copy the code

The second way to trigger mutation is:

Import {mapActions} from 'vuex' import {mapActions} from 'vuex'Copy the code

Map the required Actions functions to the current component’s methods using the mapActions function we just imported:

2. map the specified mutations function to the methods function of the current component (methods: {... MapActions (['addAsync','addNAsync']) Handle1 () {this.addAsync()}} "handle1() {this.addasync (). } "can be omitted // can be directly added to the button click event @click="addAsync" insteadCopy the code

Getter

Getters are used to process data in a Store to form new data

  • Getters can process existing data in the Store to form new data, similar to the calculation properties of Vue

  • As the data in the Store changes, so does the data in the Getter.

    // define Getter export default new vuex. Store({state: {count: 0}, getters: {showNum: State => {return 'count ('+ state.count +')'}}})Copy the code

The first way to use Getters is:

This $store. Getters. NameCopy the code

The second way to use getters is:

import { mapGetters } from 'vuex' computed: { ... mapGetters(['showNum']) }Copy the code

# There is no end to learning! Come on!