Vuex characteristics 1:

The use method of Vue is needed when using Vuex, so Vuex is essentially a plug-in, so the implementation of Vuex is to realize a plug-in that shares data globally

Character 2:

When using Vuex, we will create a storehouse through vuex. Store, so we also need to add a Store property in Vuex. The value of this property is a class.

The characteristics of 3:

In order for each Vue instance to be able to fetch the repository through this. store, you also need to dynamically add store to the repository for each Vue instance, and store properties to each Vue instance.

1. Add global $store

// An external call to vue.use will execute install and pass in the vue instance and optional parameters on execution
const install = (Vue, options) = > {
    // Add a $store attribute to each Vue instance
    // There is a method in vue called mixin that is executed when each vue instance is created
    // So you can add the $store attribute to each instance of a mixin, which receives an object
    Vue.mixin({
        // Rewrite the lifecycle method for each VUE instance
        beforeCreate() {
            // When creating an instance, Vue creates the parent component first and then the child component
            // console.log(this.$options.name);
            // Root->App->Helloworld
            // If it is the root component, there is store by default, so just change store to $store
            if (this.$options && this.$options.store) {
                this.$store = this.$options.store
            } else {
                // If it is not the root component, there is no store by default
                this.$store = this.$parent.$store
            }
        }
    })
}
// Add a Store attribute to Vuex. The value of this attribute is a class
class Store {
    // When called, an object argument is passed, which is the repository
    constructor(options) {
        this.options = options
    }
}

/ / exposure
export default {
    install,
    Store
}
Copy the code

2. Share data

// An external call to vue.use will execute install and pass in the vue instance and optional parameters on execution
const install = (Vue, options) = > {
    // Add a $store attribute to each Vue instance
    // There is a method in vue called mixin that is executed when each vue instance is created
    // So you can add the $store attribute to each instance of a mixin, which receives an object
    Vue.mixin({
        // Rewrite the lifecycle method for each VUE instance
        beforeCreate() {
            // When creating an instance, Vue creates the parent component first and then the child component
            // console.log(this.$options.name);
            // Root->App->Helloworld
            // If it is the root component, there is store by default, so just change store to $store
            if (this.$options && this.$options.store) {
                this.$store = this.$options.store
            } else {
                // If it is not the root component, there is no store by default
                this.$store = this.$parent.$store
            }
        }
    })
}
// Add a Store attribute to Vuex. The value of this attribute is a class
class Store {
    // When called, an object argument is passed, which is the repository
    constructor(options) {
        // this.options = options
        / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = = =
        // Add the shared data to the Store
        // This.$store will be available in the future
        // Now that you have access to the Store, you can use.state to get the attributes you want to share
        this.state = options.state
    }
}

/ / exposure
export default {
    install,
    Store
}
Copy the code

The effect

3. Implement getters

// An external call to vue.use will execute install and pass in the vue instance and optional parameters on execution
const install = (Vue, options) = > {
    // Add a $store attribute to each Vue instance
    // There is a method in vue called mixin that is executed when each vue instance is created
    // So you can add the $store attribute to each instance of a mixin, which receives an object
    Vue.mixin({
        // Rewrite the lifecycle method for each VUE instance
        beforeCreate() {
            // When creating an instance, Vue creates the parent component first and then the child component
            // console.log(this.$options.name);
            // Root->App->Helloworld
            // If it is the root component, there is store by default, so just change store to $store
            if (this.$options && this.$options.store) {
                this.$store = this.$options.store
            } else {
                // If it is not the root component, there is no store by default
                this.$store = this.$parent.$store
            }
        }
    })
}
// Add a Store attribute to Vuex. The value of this attribute is a class
class Store {
    // When called, an object argument is passed, which is the repository
    constructor(options) {
        // this.options = options
        // Add the shared data to the Store
        // This.$store will be available in the future
        // Now that you have access to the Store, you can use.state to get the attributes you want to share
        this.state = options.state
        // Place the passed getters on the Store
        this.initGetters(options)
    }
    initGetters(options) {
        // 1. Get the getters passed in
        let getters = options.getters || {}
        // 2. Add a getters property to Store
        this.getters = {}
        //3. Iterate over the methods in the passed getters to add to the current Store getters
        for (let key in getters) {
            // console.log(key);
            Object.defineProperty(this.getters, key, {
                get: () = > {
                    return getters[key](this.state)
                }
            })
        }
    }
}

/ / exposure
export default {
    install,
    Store
}
Copy the code

The effect

4. Implement mutation method

/ / = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
import Vue from 'vue'
// An external call to vue.use will execute install and pass in the vue instance and optional parameters on execution
const install = (Vue, options) = > {
    // Add a $store attribute to each Vue instance
    // There is a method in vue called mixin that is executed when each vue instance is created
    // So you can add the $store attribute to each instance of a mixin, which receives an object
    Vue.mixin({
        // Rewrite the lifecycle method for each VUE instance
        beforeCreate() {
            // When creating an instance, Vue creates the parent component first and then the child component
            // console.log(this.$options.name);
            // Root->App->Helloworld
            // If it is the root component, there is store by default, so just change store to $store
            if (this.$options && this.$options.store) {
                this.$store = this.$options.store
            } else {
                // If it is not the root component, there is no store by default
                this.$store = this.$parent.$store
            }
        }
    })
}
// Add a Store attribute to Vuex. The value of this attribute is a class
class Store {
    // When called, an object argument is passed, which is the repository
    constructor(options) {
        // this.options = options
        // Add the shared data to the Store
        // This.$store will be available in the future
        // Now that you have access to the Store, you can use.state to get the attributes you want to share
        / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
        // There is a util utility class in vue that can quickly make some data bidirectional binding via defineReactive method
        // This method takes three parameters: which object to add an attribute to, what attribute to add to the specified object, and what value to add to the attribute
        Vue.util.defineReactive (this.'state',options.state)
        // Place the passed getters on the Store
        this.initGetters(options)
        / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
        // Place the mutations passed in on the Store
        this.initMutions(options)
    }
    / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
    commit(type,payload){//'addNum',10
        this.mutations[type](payload)
    }
    initMutions(options){
        // 1
        let mutations = options.mutations || {}
        // add a mutation attribute on Store
        this.mutations = {}
        //3. The method from the mutation passed in is added to the current Store mutation
        for(let key in mutations){
            this.mutations[key]=(payload) = >{/ / 10
                // mutations['addNum'](num,10)
                mutations[key](this.state,payload)
            }
        }
    }
    initGetters(options) {
        // 1. Get the getters passed in
        let getters = options.getters || {}
        // 2. Add a getters property to Store
        this.getters = {}
        //3. Iterate over the methods in the passed getters to add to the current Store getters
        for (let key in getters) {
            // console.log(key);
            Object.defineProperty(this.getters, key, {
                get: () = > {
                    return getters[key](this.state)
                }
            })
        }
    }
}

/ / exposure
export default {
    install,
    Store
}
Copy the code

The effect

5. Implement actions methods

import Vue from 'vue'
// An external call to vue.use will execute install and pass in the vue instance and optional parameters on execution
const install = (Vue, options) = > {
    // Add a $store attribute to each Vue instance
    // There is a method in vue called mixin that is executed when each vue instance is created
    // So you can add the $store attribute to each instance of a mixin, which receives an object
    Vue.mixin({
        // Rewrite the lifecycle method for each VUE instance
        beforeCreate() {
            // When creating an instance, Vue creates the parent component first and then the child component
            // console.log(this.$options.name);
            // Root->App->Helloworld
            // If it is the root component, there is store by default, so just change store to $store
            if (this.$options && this.$options.store) {
                this.$store = this.$options.store
            } else {
                // If it is not the root component, there is no store by default
                this.$store = this.$parent.$store
            }
        }
    })
}
// Add a Store attribute to Vuex. The value of this attribute is a class
class Store {
    // When called, an object argument is passed, which is the repository
    constructor(options) {
        // this.options = options
        // Add the shared data to the Store
        // This.$store will be available in the future
        // Now that you have access to the Store, you can use.state to get the attributes you want to share
        // There is a util utility class in vue that can quickly make some data bidirectional binding via defineReactive method
        // This method takes three parameters: which object to add an attribute to, what attribute to add to the specified object, and what value to add to the attribute
        Vue.util.defineReactive (this.'state',options.state)
        // Place the passed getters on the Store
        this.initGetters(options)
        // Place the mutations passed in on the Store
        this.initMutions(options)
        // ======================= updated ==================
         // Place the actions passed in on the Store
         this.initActions(options)
    }
    dispatch=(type,payload) = >{//asyncAddNum 10
        this.actions[type](payload)// this.actions['asyncAddNum'](10)
    }
    initActions(options){
         // 1. Get the actions passed in
         let actions = options.actions || {}
         // 2. Add an actions property to Store
         this.actions = {}
         //3. Iterate over the mutation passed in to add the methods to the actions of the current Store
         for(let key in actions){
             this.actions[key]=(payload) = >{
                 actions[key](this,payload)//actions['asyncAddNum'](this,10)}}}// ==================== updated ===============
    commit=(type,payload) = >{//'addNum',10
        this.mutations[type](payload)
    }
    initMutions(options){
        // 1
        let mutations = options.mutations || {}
        // add a mutation attribute on Store
        this.mutations = {}
        //3. The method from the mutation passed in is added to the current Store mutation
        for(let key in mutations){
            this.mutations[key]=(payload) = >{/ / 10
                // mutations['addNum'](num,10)
                mutations[key](this.state,payload)
            }
        }
    }
    initGetters(options) {
        // 1. Get the getters passed in
        let getters = options.getters || {}
        // 2. Add a getters property to Store
        this.getters = {}
        //3. Iterate over the methods in the passed getters to add to the current Store getters
        for (let key in getters) {
            // console.log(key);
            Object.defineProperty(this.getters, key, {
                get: () = > {
                    return getters[key](this.state)
                }
            })
        }
    }
}

/ / exposure
export default {
    install,
    Store
}
Copy the code

The effect

6. Share data in a modular manner

1. Above, we shared data of all modules in state, but this will lead to the problem of lack of naming. For example, there are three modules: home page/personal center/login, all of which need to share names, and the values of these three names are different, so six names may be needed. In order to solve this problem, VUex introduced modular data. Through modular data sharing, the data shared by different modules can be placed in different states.

The shared data obtained in getters does not need to be named by the module, but must not have the same name

The rest of the attributes can have the same name, but you need to add the module name

Extracting module information

Custom vuex. Js

import Vue from 'vue'
// An external call to vue.use will execute install and pass in the vue instance and optional parameters on execution
const install = (Vue, options) = > {
    // Add a $store attribute to each Vue instance
    // There is a method in vue called mixin that is executed when each vue instance is created
    // So you can add the $store attribute to each instance of a mixin, which receives an object
    Vue.mixin({
        // Rewrite the lifecycle method for each VUE instance
        beforeCreate() {
            // When creating an instance, Vue creates the parent component first and then the child component
            // console.log(this.$options.name);
            // Root->App->Helloworld
            // If it is the root component, there is store by default, so just change store to $store
            if (this.$options && this.$options.store) {
                this.$store = this.$options.store
            } else {
                // If it is not the root component, there is no store by default
                this.$store = this.$parent.$store
            }
        }
    })
}
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = = = =
// The class that defines module information
class ModuleCollection {
    constructor(rootModule) {
        // Separate methods for formatting
        this.register([], rootModule)
    }
    register(arr, rootModule) {
        // console.log(arr); //["login", "account"]
        // console.log(rootModule.state);
        // console.log(rootModule);
        // 1. Create the module in the required format
        let module = {
            _raw: rootModule,
            _state: rootModule.state,
            _children: {}}//2. Save module information
        // Determine whether it is a root module or a submodule
        if (arr.length == 0) {
            this.root = module// Save the root module
        } else {
            // Save the submodule
            // this.root._children[arr[arr.length-1]]=module
            // let testArr= ["login", "account"]
            // let res=testArr.splice(0,testArr.length-1)
        // // console.log(res);
          let parent=  arr.splice(0, arr.length - 1).reduce((root, currentKey) = > {
                return root._children[currentKey]
            }, this.root)
            parent._children[arr[arr.length-1]] =module
        } // 3. Process the submodule, traversing modules in the following module
        for (let childrenModuleName in rootModule.modules) {
            let childrenModule = rootModule.modules[childrenModuleName]
            // console.log(childrenModule);
            // Start the recursion by adding the submodule format to children
            The concat() method is used to join two or more arrays.
            this.register(arr.concat(childrenModuleName), childrenModule)
        }
    }
}
// Add a Store attribute to Vuex. The value of this attribute is a class
class Store {
    // When called, an object argument is passed, which is the repository
    constructor(options) {
        // this.options = options
        // Add the shared data to the Store
        // This.$store will be available in the future
        // Now that you have access to the Store, you can use.state to get the attributes you want to share
        // There is a util utility class in vue that can quickly make some data bidirectional binding via defineReactive method
        // This method takes three parameters: which object to add an attribute to, what attribute to add to the specified object, and what value to add to the attribute
        Vue.util.defineReactive(this.'state', options.state)
        // Place the passed getters on the Store
        this.initGetters(options)
        // Place the mutations passed in on the Store
        this.initMutions(options)
        // Place the actions passed in on the Store
        this.initActions(options)
        / / = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
        // Retrieve module information
        this.modules = new ModuleCollection(options)
        // console.log(this.modules);
    }
    dispatch = (type, payload) = > {//asyncAddNum 10
        this.actions[type](payload)// this.actions['asyncAddNum'](10)
    }
    initActions(options) {
        // 1. Get the actions passed in
        let actions = options.actions || {}
        // 2. Add an actions property to Store
        this.actions = {}
        //3. Iterate over the mutation passed in to add the methods to the actions of the current Store
        for (let key in actions) {
            this.actions[key] = (payload) = > {
                actions[key](this, payload)//actions['asyncAddNum'](this,10)
            }
        }
    }
    commit = (type, payload) = > {//'addNum',10
        this.mutations[type](payload)
    }
    initMutions(options) {
        // 1
        let mutations = options.mutations || {}
        // add a mutation attribute on Store
        this.mutations = {}
        //3. The method from the mutation passed in is added to the current Store mutation
        for (let key in mutations) {
            this.mutations[key] = (payload) = > {/ / 10
                // mutations['addNum'](num,10)
                mutations[key](this.state, payload)
            }
        }
    }
    initGetters(options) {
        // 1. Get the getters passed in
        let getters = options.getters || {}
        // 2. Add a getters property to Store
        this.getters = {}
        //3. Iterate over the methods in the passed getters to add to the current Store getters
        for (let key in getters) {
            // console.log(key);
            Object.defineProperty(this.getters, key, {
                get: () = > {
                    return getters[key](this.state)
                }
            })
        }
    }
}

/ / exposure
export default {
    install,
    Store
}
Copy the code

index.js

import Vue from 'vue'
import Suex from './Suex'

/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = =
/ / = = = = = = = = = = = = = = = = = = = = = must pay attention to the order, otherwise an error = = = = = = = = = = = = = = = = = = = = = = = = = =
Vue.use(Suex)
let login={
  // Used to save shared data
  state: {
    name: 'Killer pill'.num: 0
  },
  mutations: {},// Used to asynchronously modify shared data
  actions: {},// For modular sharing of data
  modules: {},getters: {}}let account={
  // Used to save shared data
  state: {
    name: 'fat tiger'.num: 0
  },
  mutations: {},// Used to asynchronously modify shared data
  actions: {},// For modular sharing of data
  modules: {
    login
  },
  getters: {}}export default new Suex.Store({
  // Used to save shared data
  state: {
    name: 'Mangosteen has come home'.num: 0
  },
  mutations: {
    addNum(state, payload) {
      state.num += payload
    }
  },
  // Used to asynchronously modify shared data
  actions: {
    asyncAddNum({commit},payload){
      setTimeout(() = >{
        commit('addNum',payload)
      },3000)}},// For modular sharing of data
  modules: {
    account
  },
  getters: {
    // Equivalent to vuex's calculated properties
    myName(state) {
      return state.name + '111'}}})Copy the code

7. Install the module data

import Vue from 'vue'
// An external call to vue.use will execute install and pass in the vue instance and optional parameters on execution
const install = (Vue, options) = > {
    // Add a $store attribute to each Vue instance
    // There is a method in vue called mixin that is executed when each vue instance is created
    // So you can add the $store attribute to each instance of a mixin, which receives an object
    Vue.mixin({
        // Rewrite the lifecycle method for each VUE instance
        beforeCreate() {
            // When creating an instance, Vue creates the parent component first and then the child component
            // console.log(this.$options.name);
            // Root->App->Helloworld
            // If it is the root component, there is store by default, so just change store to $store
            if (this.$options && this.$options.store) {
                this.$store = this.$options.store
            } else {
                // If it is not the root component, there is no store by default
                this.$store = this.$parent.$store
            }
        }
    })
}
// The class that defines module information
class ModuleCollection {
    constructor(rootModule) {
        // Separate methods for formatting
        this.register([], rootModule)
    }
    register(arr, rootModule) {
        // console.log(arr); //["login", "account"]
        // console.log(rootModule.state);
        // console.log(rootModule);
        // 1. Create the module in the required format
        let module = {
            _raw: rootModule,
            _state: rootModule.state,
            _children: {}}//2. Save module information
        // Determine whether it is a root module or a submodule
        if (arr.length == 0) {
            this.root = module// Save the root module
        } else {
            // Save the submodule
            // this.root._children[arr[arr.length-1]]=module
            // let testArr= ["login", "account"]
            // let res=testArr.splice(0,testArr.length-1)
            // // console.log(res);
            let parent = arr.splice(0, arr.length - 1).reduce((root, currentKey) = > {
                return root._children[currentKey]
            }, this.root)
            parent._children[arr[arr.length - 1]] = module
        } // 3. Process the submodule, traversing modules in the following module
        for (let childrenModuleName in rootModule.modules) {
            let childrenModule = rootModule.modules[childrenModuleName]
            // console.log(childrenModule);
            // Start the recursion by adding the submodule format to children
            The concat() method is used to join two or more arrays.
            this.register(arr.concat(childrenModuleName), childrenModule)
        }
    }
}
// Add a Store attribute to Vuex. The value of this attribute is a class
class Store {
    // When called, an object argument is passed, which is the repository
    constructor(options) {
        // this.options = options
        // Add the shared data to the Store
        // This.$store will be available in the future
        // Now that you have access to the Store, you can use.state to get the attributes you want to share
        // There is a util utility class in vue that can quickly make some data bidirectional binding via defineReactive method
        // This method takes three parameters: which object to add an attribute to, what attribute to add to the specified object, and what value to add to the attribute
        / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = here has installed the root module data, = = = = = = = = = = = = = = = = = = = = = = = = =
        Vue.util.defineReactive(this.'state', options.state)
        // Place the passed getters on the Store
        this.initGetters(options)
        // Place the mutations passed in on the Store
        this.initMutions(options)
        // Place the actions passed in on the Store
        this.initActions(options)
        // Retrieve module information
        this.modules = new ModuleCollection(options)
        // console.log(this.modules);
        / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = here only need to install the sub module data = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
        // Install submodule data
        this.initModules([], this.modules.root)
    }
    initModules(arr, rootModule) {
        // Use an empty array to determine whether it is a root module or a submodule. If it is a submodule, install data to this.state
        if (arr.length > 0) {
            let parent = arr.splice(0, arr.length - 1).reduce((state, currentKey) = > {
                // console.log(state[currentKey]);
                return state[currentKey]
            }, this.state)
            // console.log(parent);
            // Which object to add attributes to, what attributes to add, what data
            Vue.set(parent,arr[arr.length-1],rootModule._state)
        }
        // If the current module is not a submodule, you need to install the submodule from the root module
        for (let childrenModuleName in rootModule._children) {
            let childrenModule = rootModule._children[childrenModuleName]
            // console.log(childrenModule);
            this.initModules(arr.concat(childrenModuleName), childrenModule)
        }
    }
    dispatch = (type, payload) = > {//asyncAddNum 10
        this.actions[type](payload)// this.actions['asyncAddNum'](10)
    }
    initActions(options) {
        // 1. Get the actions passed in
        let actions = options.actions || {}
        // 2. Add an actions property to Store
        this.actions = {}
        //3. Iterate over the mutation passed in to add the methods to the actions of the current Store
        for (let key in actions) {
            this.actions[key] = (payload) = > {
                actions[key](this, payload)//actions['asyncAddNum'](this,10)
            }
        }
    }
    commit = (type, payload) = > {//'addNum',10
        this.mutations[type](payload)
    }
    initMutions(options) {
        // 1
        let mutations = options.mutations || {}
        // add a mutation attribute on Store
        this.mutations = {}
        //3. The method from the mutation passed in is added to the current Store mutation
        for (let key in mutations) {
            this.mutations[key] = (payload) = > {/ / 10
                // mutations['addNum'](num,10)
                mutations[key](this.state, payload)
            }
        }
    }
    initGetters(options) {
        // 1. Get the getters passed in
        let getters = options.getters || {}
        // 2. Add a getters property to Store
        this.getters = {}
        //3. Iterate over the methods in the passed getters to add to the current Store getters
        for (let key in getters) {
            // console.log(key);
            Object.defineProperty(this.getters, key, {
                get: () = > {
                    return getters[key](this.state)
                }
            })
        }
    }
}

/ / exposure
export default {
    install,
    Store
}
Copy the code

The effect

8. Install the module

import Vue from 'vue'
// An external call to vue.use will execute install and pass in the vue instance and optional parameters on execution
const install = (Vue, options) = > {
    // Add a $store attribute to each Vue instance
    // There is a method in vue called mixin that is executed when each vue instance is created
    // So you can add the $store attribute to each instance of a mixin, which receives an object
    Vue.mixin({
        // Rewrite the lifecycle method for each VUE instance
        beforeCreate() {
            // When creating an instance, Vue creates the parent component first and then the child component
            // console.log(this.$options.name);
            // Root->App->Helloworld
            // If it is the root component, there is store by default, so just change store to $store
            if (this.$options && this.$options.store) {
                this.$store = this.$options.store
            } else {
                // If it is not the root component, there is no store by default
                this.$store = this.$parent.$store
            }
        }
    })
}
// The class that defines module information
class ModuleCollection {
    constructor(rootModule) {
        // Separate methods for formatting
        this.register([], rootModule)
    }
    register(arr, rootModule) {
        // console.log(arr); //["login", "account"]
        // console.log(rootModule.state);
        // console.log(rootModule);
        // 1. Create the module in the required format
        let module = {
            _raw: rootModule,
            _state: rootModule.state,
            _children: {}}//2. Save module information
        // Determine whether it is a root module or a submodule
        if (arr.length == 0) {
            this.root = module// Save the root module
        } else {
            // Save the submodule
            // this.root._children[arr[arr.length-1]]=module
            // let testArr= ["login", "account"]
            // let res=testArr.splice(0,testArr.length-1)
            // // console.log(res);
            let parent = arr.splice(0, arr.length - 1).reduce((root, currentKey) = > {
                return root._children[currentKey]
            }, this.root)
            parent._children[arr[arr.length - 1]] = module
        } // 3. Process the submodule, traversing modules in the following module
        for (let childrenModuleName in rootModule.modules) {
            let childrenModule = rootModule.modules[childrenModuleName]
            // console.log(childrenModule);
            // Start the recursion by adding the submodule format to children
            The concat() method is used to join two or more arrays.
            this.register(arr.concat(childrenModuleName), childrenModule)
        }
    }
}
// Add a Store attribute to Vuex. The value of this attribute is a class
class Store {
    // When called, an object argument is passed, which is the repository
    constructor(options) {
        // this.options = options
        // Add the shared data to the Store
        // This.$store will be available in the future
        // Now that you have access to the Store, you can use.state to get the attributes you want to share
        // There is a util utility class in vue that can quickly make some data bidirectional binding via defineReactive method
        // This method takes three parameters: which object to add an attribute to, what attribute to add to the specified object, and what value to add to the attribute
        Vue.util.defineReactive(this.'state', options.state)

        // Retrieve module information
        this.modules = new ModuleCollection(options)
        // console.log(this.modules);
        // Install submodule data
        this.initModules([], this.modules.root)
    }
    initModules(arr, rootModule) {
        // Use an empty array to determine whether it is a root module or a submodule. If it is a submodule, install data to this.state
        if (arr.length > 0) {
            let parent = arr.splice(0, arr.length - 1).reduce((state, currentKey) = > {
                // console.log(state[currentKey]);
                return state[currentKey]
            }, this.state)
            // console.log(parent);
            // Which object to add attributes to, what attributes to add, what data
            Vue.set(parent, arr[arr.length - 1], rootModule._state)
        }
        / / = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = =
        // Place the passed getters on the Store
        this.initGetters(rootModule._raw)
        // Place the mutations passed in on the Store
        this.initMutions(rootModule._raw)
        // Place the actions passed in on the Store
        this.initActions(rootModule._raw)
        // If the current module is not a submodule, you need to install the submodule from the root module
        for (let childrenModuleName in rootModule._children) {
            let childrenModule = rootModule._children[childrenModuleName]
            // console.log(childrenModule);
            this.initModules(arr.concat(childrenModuleName), childrenModule)
        }
    }
    dispatch = (type, payload) = > {//asyncAddNum 10
        / / = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = =
        this.actions[type].forEach(fn= > fn(payload))// this.actions['asyncAddNum'](10)
    }
    initActions(options) {
        // 1. Get the actions passed in
        let actions = options.actions || {}
        // 2. Add an actions property to Store
        / / = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = =
        this.actions = this.actions || {}
        //3. Iterate over the mutation passed in to add the methods to the actions of the current Store
        for (let key in actions) {
            / / = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = =
            this.actions[key] = this.actions[key] || []
            this.actions[key].push((payload) = > {
                actions[key](this, payload)//actions['asyncAddNum'](this,10)
            })
        }
    }
    commit = (type, payload) = > {//'addNum',10
        this.mutations[type].forEach(fn= > fn(payload))
    }
    initMutions(options) {
        // 1
        let mutations = options.mutations || {}
        // add a mutation attribute on Store
        / / = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = =
        this.mutations = this.mutations || {}
        //3. The method from the mutation passed in is added to the current Store mutation
        for (let key in mutations) {
            / / = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = =
            this.mutations[key] = this.mutations[key] || []
            this.mutations[key].push((payload) = > {/ / 10
                // mutations['addNum'](num,10)
                mutations[key](options.state, payload)
            })
        }
    }
    initGetters(options) {
        // 1. Get the getters passed in
        let getters = options.getters || {}
        // 2. Add a getters property to Store
        / / = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = =
        this.getters = this.getters || {}
        //3. Iterate over the methods in the passed getters to add to the current Store getters
        for (let key in getters) {
            // console.log(key);
            Object.defineProperty(this.getters, key, {
                get: () = > {
                    / / = = = = = = = = = = = = = = = = = = = = = = = update = = = = = = = = = = = = = = = = = = = = = = = = =
                    return getters[key](options.state)
                }
            })
        }
    }
}

/ / exposure
export default {
    install,
    Store
}
Copy the code

The effect

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vuex———Vuex implementation principle analysis

1. Add global $store

2. Share data

3. Implement getters

4. Implement mutation method

5. Implement actions methods

6. Share data in a modular manner

Extracting module information

7. Install the module data

8. Install the module

Vuex———Vuex implementation principle analysis

1. Add global $store

2. Share data

3. Implement getters

4. Implement mutation method

5. Implement actions methods

6. Share data in a modular manner

Extracting module information

7. Install the module data

8. Install the module

Related Posts

Qt runs OpenGL Demo

Uni-app Uploads pictures to small programs for rotation

Nodejs is the holy grail of javascript development back-end programs