Preparation before use

How do I add a Vuex plug-in to a project

  1. npm i vuex
  2. Create the folder store(recommended)/ index.js in the SRC development path

Specific code

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// Create and export an instance object Store that holds public data
export default new Vuex.Store({})
Copy the code
  1. Inject the Store instance object into the entry file min.js
// Import the Store instance
import Store from './store' // The default index.js path can be omitted
new Vue({
    Store
})
Copy the code

The new project

  • Simply select the VUex option when creating vuE-CLI scaffolding

Vuex overview of

What is a vuex:

  • Vue’s official core plug-in
  • Common data is centrally managed and data views respond to each other

The role of vuex

  • Vuex is cleaner and more convenient than props, $emit, and public events ($ON ->$emit), which have their own tree-structured content.

Five important concepts

A. The state * * *

role

  • Save public data

grammar

  • Defining a State object
export default new Vuex.Store({
    state: {// Can be accessed in any componentProperty: Property value}})Copy the code
  • Use the data in state
// In the template$store. State. Properties// In the method
this. $store. State. PropertiesCopy the code

2. Mutations * * *

role

  • Modifying public Data

grammar

  • Definition of mutations
mutations:{
// The first argument here is a parameter, but the state object is returned as the first parameter value by default
The second parameter represents the value passed in. Values of complex data types can be passed inName:function(state[,newVal]){
        // The value to be modified must be an existing value in stateState. property = newVal}}Copy the code
  • The use of mutations
this.$store.commit('name',newVal)
Copy the code

Getters (similar to computed attributes) **

role

  • Generate new values based on the state public data
  • The value of state changes, and so does the value of getters

grammar

  • Define getters
Getters: {name (state) {returnCalculation results}}Copy the code
  • Using getters
this. $store. Getters. NameCopy the code

4. Actions *

role

  • Handling asynchronous requests

grammar

  • Define the actions
Actions: {name ({commit}, newVal) {// Send an asynchronous request.// To save the data, mutations must be modified to save it
        commit('mutations name', request result)}}Copy the code
  • The use of the actions
this.$store.dispatch('name', newVal)Copy the code

Five modules.

role

  • Reduce code redundancy in large projects and make common data parts modular for clearer presentation

grammar

  • define
modules:{
    modules1: {// when the namespaced property value is true, the module's attributes need to be accessed with the module name -> when the namespaced property value is false
    // eg: this.$store.state.modules1. attribute
    $upgrades1 (' upgrades1 /mutations name ',newVal)
    namespaced: true.// There are also five separate concepts in the module
        state: {},mutations: {},getters: {},actions: {},modules: {}}}Copy the code

conclusion

  • Vuex is a separate data tree, and there is a fixed general flow for the operation of public data –> Actions (asynchronous request), > call the mutations method (save the data), > state binding data, which can render the data view
expand

Map AIDS

  • Role: VuEX data use always requires deep call, map can be deconstructed, simplify the use method

use

-- Come on!!Copy the code