vue family bucket vuex's martial arts script

1. What is vuex

Vuex is designed for Vue The state management mode of JS application development adopts centralized storage to manage the state of all components of the application and solve the multi-component data communication

Generally speaking, vuex is an official tool provided by vue that is independent of the component system and manages public data
In vue2, we usually use the method of transferring data from parent to child and from child to parent. In this way, we can do some small projects. When the project is large, it will be very troublesome to write in this way. At this time, we can use vuex's plug-in to put the data into a container that can be used by both parent and child components

vue's Five Dragon subduing palms

  1. state: unified definition of public data (similar to data(){return {a:1, b:2, xxxxx})
  2. mutations: use it to modify data (similar to methods)
  3. getters: similar to computed (calculate attributes, calculate the existing state to get new data ------ derivation)
  4. actions: initiate asynchronous requests
  5. modules: module splitting

We need to make some preparations before we practice this martial arts

Configuration item preparation

Overall steps:

  1. Installation. It is a separate package and needs to be installed first.
  2. to configure
    a. Create vuex Store instance
    b. Inject store into Vue instance
  3. use. Using store in components
1. Installation package

Enter the project directory and install the package

npm install vuex@3.6.2

Development dependency: NPM I xxxx -- save dev; npm i xxxx -D ;
Production dependency: NPM I xxxx -- save; npm i xxxx -S; npm i xxxx

2. Create a folder

The operation of routing is basically the same. Create a folder

Root component
└── src
    ├── main.js
    ├── router
    │   └── index.js   # route
    └── store
        └── index.js   # vuex

In store / index JS, as follows:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state(){
    return {
      // It is public data, and all components can be used directly
      count: 100
    }
  }
})
export default store
3. Inject store into Vue instance

In Src / main JS:

  1. Import store
  2. And inject Vue instances
// Omit others
// 1. Import store
import store from './store' 

new Vue({
  // Omit other
  store // 2. Inject Vue instance
})

Using store in components

In any component, through this$ store. State to get public data

First palm!!! (state)

He is directly in the configuration file index JS const store = new vuex Store operation


The role of state is the same as that of data in the component. Both are used to access data

new Vuex.store({
  state() {
    return {
       Attribute name: attribute value 
    }
  }
})

usage method:

  • In the component, through this$ store. state. Property name to access
  • If you access the template string directly, you can omit this and write it directly as: {{$store.state. Attribute name}}

Second palm!!! (modify public data with mutations)

The function is to modify the public data defined in state by calling changes.

It is similar to the methods The usage of is the same, which is to modify the data

There are two formats: definition format and call format

Define format:

new Vue.store({
  // Omit other
  mutations: {
    // Each item is a function that can declare two formal parameters
  	mutation Name 1: function(state , data) {
  
    },
    mutation First name 2: function(state , data) {
  
    }
	}
})

● the first parameter is required and indicates the current state. No need to pass in when using
● the second parameter is optional, which indicates the load and is optional. Data to be passed in when using

Call format:

this.$store.commit('mutation name', Argument)

The operation flow chart is as follows:

The schematic diagram is as follows:

Third palm!!! Derived state

Function: Based on the data in state, further process the data to get new data. (same as calculated in the component)

Define format

new Vuex.store({
  // Omit other
  getters: {
    // State is the public data state defined above
    getter Your name 1: function(state) {
      return Value to return
    }
  }
})

State is the public data state defined above

Use format

In the component through: $store getters. The name of getter

Summary of the first three Palms:

Fourth palm!!! (vuex actions - send asynchronous requests)

actions introduction

● actions is a configuration item of vuex

● function: send asynchronous request to obtain data, call mutations to save data, and encapsulate the whole ajax operation into Vuex

● key points:
○ asynchronous request operation can be sent inside the action

○ action modifies the state indirectly: it modifies the state by calling mutation

Define format:

 new Vuex.store({
  // Omit other
  actions: {
    // The context object is automatically passed in, which has the same methods and properties as the store instance
    action Name of: function(context, load) {
      // 1. Send asynchronous request to request data
      
      // 2. commit calls mutation to modify data
      
      // context.commit('mutation name ', load)
    }
  }
})

Call format

In the component through this$ store. Dispatch ('name of actions', parameter) to call action


Examples
Write the action in the book request in the above example

// Send an ajax request, get the data from the back end, and then modify the data in the state

    actions: {

      getBooks (context) {

        // 1. Send asynchronous request

        axios({

          url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',

          method: 'GET'

        }).then(res => {

          console.log(res)

          // 2. Call mutation

          context.commit('setBooks', res.data.data)

        })

      }

    },

Fifth palm!!! (use modules to split complex business)

The fifth palm is the collection of the first four palms

The function of modules: split modules to separate complex scenes according to modules
format

export default new Vuex.Store({
  // state: used to save all public data
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  	Module name 1: {
    		// If named is true, the module name must be added when using mutations
      	namespaced: true, 
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
  			modules: {}
  	},
    Module name 2: {
        // Namemapped is not written, and the default is false. When using mutations, you do not need to add a module name
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
         modules: {}
  	}  
  }
})

You can also further split the file.

|--store /
|------- index.js # Introduction module
|------- modules
|-------------- / mod1.js # Module 1
|-------------- / mod2.js # Module 2

Call the state, mutation, getters and actions methods in the module

getters : this.$store.getters ['module 1/g name']

state: this.$store.state. Module 1 Data name

mutation: this.$store.commit('module 1/m name, parameter)

action: this.$store.dispatch('module 1/a name ', parameter)

Summary schematic

Tags: Javascript node.js Front-end Vue.js

Posted by socio on Fri, 13 May 2022 00:56:35 +0300