This is the sixth day of my participation in Gwen Challenge

Note: the following is personal understanding, if there is wrong also hope to correct!

Know Vuex

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all the components of the application, namely, a global state repository where the data is responsive and the variables of the repository can be used on any page

This is a flow chart from the official website of VuexThe document address

The use of authentic Vuex

  • The installation
Yarn add vuex // or NPM install vuexCopy the code
  • use

Create /store/index.js in SRC

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {userInfo: {name:"Zhang"}},mutations: {setUserInfo(state, data){
            state.userInfo = data
        }
    },
    getters: {userInfo: state= >  state.userInfo
    },
    actions: {asyncSetUserInfo({ commit },data){
            setTimeout( () = >{
                commit('setUserInfo',data)
            },1000)}}})export default store;
Copy the code
  • The main use js
import Vue from "vue";
import App from "./App.vue";
import store from "./store"
new Vue({
    store,
    render: (h) = > h(App),
}).$mount("#app");
Copy the code
  • Page shows
<template> <div class="demo"> {{ $store.getters.userInfo.name }} <button @click="$store.dispatch('asyncSetUserInfo',{ </button> </div> </template>Copy the code

Update process: use dispatch in the component to trigger actions, commit in the actions, mutations, and finally change the state value in the store

Rewrite Vuex

  • What do we need to implement? We know through the process that we need to have a dispatch method, commit, etc… So let’s start implementing new vuex.js under Store
let Vue;
function install( _Vue ){
    Vue = _Vue;
    // Specify the Store option in the Vue prototype
    _Vue.mixin({
        beforeCreate(){
            if(this.$options.store){
                // This store is an instance of your new vuex. store
                // You can use this.$store to get your own repository state and some methods
                Vue.prototype.$store = this.$options.store; }}})}class Store {
    // Option is the object you pass in that has state mutations Action getters
    constructor( option = {} ){
        // Make use of vue's responsiveness
        this.state = new Vue({
            data:option.state
        });
        // Initialize mutations
        this._mutations = option.mutations || {};
        // Initialize the action
        this._actions = option.actions || {};
        option.getters && this.handleGetters( option.getters );
        // Override the commit method and change the current this pointer to the current instance
        const store = this;
        const { commit } = this;
        this.commit = function boundCommit (type, payload) {
            return commit.call(store, type, payload)
        }
    }
    // trigger mutations commit definition
    commit( type, arg ){
        // Change the function
        const fn = this._mutations[type];
        fn( this.state, arg )
    }
    // Execute the action method by looking for the action object's method in type
    dispatch( type, arg ){
        const fn = this._actions[type];
        fn( { commit:this.commit, state:this.state } , arg)
    }
    // getters
    handleGetters( getter ){
        this.getters = {};
        Object.keys( getter ).forEach( key= >{
            // Set only read
            Object.defineProperty( this.getters, key,{
                get: () = >{
                    return getter[key]( this.state )
                }
            })
        })
    }
}
export default { Store, install }
Copy the code

Then we change the vuex file path test for store/index.js

import Vuex from "./Vuex"

conclusion

The overall process of simple Vuex is not difficult to understand, of course, legitimate Vuex is more complex than this, simple version of the process: Maintain a method of each type object, get the corresponding method to be executed by the actual method name, and finally change the state. A small detail needs to be noted. The purpose of writing commit is to pass the commit method as an argument to the developer