I. Introduction to Vuex

1. Vuex is what

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

2. Benefits of unified vuEX management

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

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

In general, only data that needs to be shared between components is stored in VUEX. For private data in the component, it is still stored in the component’s own data

4. Basic use of VUEX

Install the vuEX dependency package

npm install vuex --save

②. Import and use

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

③ Create a store object in.store/store.js

const store = new Vuex.Store({
// state stores globally shared data
    state: { count: 0}})Copy the code

④. Hang on the vue instance in main.js

// 1. Import the store instance object
import store from './store/store.js'
// omit other code...
const app = newVue({ ... App,// 2. Mount store to Vue instance
  store,
})
app.$mount()
Copy the code

Ii. Overview of vuEX’s core concepts

1. State: Store data source, providing unique public data

const store = new Vuex.Store({
    state: { count: 0}})Copy the code

Component access mode 1:

this$store.state. Global data nameCopy the code

Component access mode 2:

1. Import mapState functions from VUEX on demand

2. Map global data needed by the current component to computed properties of the current component using the mapState function imported just now:

import { mapState } from 'vuex'
//. Map global data to calculated properties of the current component
computed: {
    ...mapState(['count'])}Copy the code

2, Mutation: used to change data in Store.

  1. Specification: Store data can only be changed by mutation in a component. Store data cannot be manipulated directly.

  2. This is a bit more cumbersome, but it allows you to monitor all data changes centrally, otherwise it’s hard to find out which component has changed the data in the Store

/ / define Mutation
const store = new Vuex.Store({
state: {
    count: 0 
},
mutations: {
  add(state) { // The state parameter is the default first parameter (mandatory)
        state.count++ 
        }
    }
})
Copy the code

Component access mode 1:

Mutation is triggered by the store.mit method

methods: {
    handle1() {
        this.$store.commit('add')}}Copy the code

Passing parameters

1. Defined in store.js

/ / define Mutation
const store = new Vuex.Store({
 state: {
      count: 0
     },
 mutations: {
   addByStep(state,step){ // The state parameter is the default first parameter (required), and the second parameter increases the number of steps
       state.count += step
   }
 }
})
Copy the code

2. Used in components

// use (triggered) mutation
methods: {
   handle() { 
       // Trigger with commit and take parameters
       this.$store.commit('addByStep'.5)}}Copy the code

Component access mode two

1. Import the mapMutations function from VUEX on demand

2. Through the imported mapMutations function, map the mutations function required by the current component to the methods of the current component:

import { mapMutations } from 'vuex'
// 1. Map global data to methods of the current component
methods: {
    ...mapMutations(['addByStep'])}Copy the code

Passing parameters

Just say addByStep (5)

3. Action: Used to process asynchronous tasks.

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

/ / define the Action
const store = new Vuex.Store({
 state: {
      count: 0
     },
 mutations: {
    add(state) {
        state.count++
    }
},
 actions: { 
    addAsync(context) { // context The official run context gets the current vuex instance
        setTimeout(() = > {
          context.commit('add')},1000)}}})Copy the code

Component access mode 1:

Action is triggered by the store.dispatch method

/ / triggers the Action
methods: {
    handle() {
        this.$store.dispatch('addAsync')}}Copy the code

With parameters

1. Defined in store.js

/ / define Acation
const store = new Vuex.Store({
 state: {
      count: 0
     },
 mutations: {
   addByStep(state,step){state.count += step}},actions: {
      addStepASync(context,step){ // context The official run context gets the current vuex instance
          setTimeout(() = >{
              context.commit('addByStep',step)
          },1000)}}})Copy the code

2. Used in components

// Use (trigger) Action
methods: {
   handle() { 
       // Trigger with dispatch and carry parameters
       this.$store.dispatch('addStepASync'.5)}}Copy the code

Component access mode two

1. Import mapActions functions from VUEX as needed

2. Map the actions required by the current component to the methods of the current component by using the mapActions function imported just now:

import { mapActions } from 'vuex'
//. Map global data to the current component's methods
methods: {
    ...mapMutations(['addASync'.'addStepASync'])}Copy the code

Passing parameters

Just say addStepASync (5)

Getter: used to process the data in Store to form new data.

1 Getter can form new data after processing existing data in Store, similar to the calculation property of Vue.

2 As the data in the Store changes, the data in the Getter also changes.

/ / define Getter
const store = new Vuex.Store({
  state: {
    count: 0
}, 
  getters: {
        showNum: state= > { // The state parameter is the default first parameter (mandatory)
            return 'The current latest quantity is'+ state.count 
        }
  }
})
Copy the code

Component access mode 1:

This $store. Getters. Name

Component access mode 2:

1. Import mapGetters functions from VUEX on demand

2. Map global data needed by the current component to computed attributes of the current component using the mapGetters function imported just now:

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