Hand-written simple vuex

Wechat official account: [Dafront-end Post] follow Dafront-end Post. Questions or suggestions, welcome to leave messages on the public account.

This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Vuex is a state management pattern developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application, and rules to ensure that the state changes in a predictable manner.

Integrated vuex

Vue In the Vue project created by cli: Vue add vuex

Core concepts:

• State Indicates the status and data
• Getters derived state, similar to computed properties
• Mutations change the function of state
• Actions Asynchronous operations

export default new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    add(state) {
      state.counter++
    }
  },
  getters: {
    doubleCounter(state) {
      return state.counter * 2
    }
  },
  actions: {
    add({commit}) {
      setTimeout(() => {
        commit('add')
      }, 1000)
    }
  }
})
Copy the code

Hand-written simple vuex

Create my-vuex.js: Store declaration, install implementation

let Vue class Store { constructor(options = {}){ this._vm = new Vue({ data: { state: Options. State}})} get state() {return this._vm._data.state} set state(v) {console.error(' cannot assign value to state! }} function install(_Vue){Vue = _Vue Vue. Mixin ({beforeCreate() {if(this.$options.store)}} function install(_Vue){Vue = _Vue Vue. Vue.prototype.$store = this.$options.store } } }) } export default { Store, install }Copy the code

Handle getters: Getters are stores.The vm computed

Class Store {constructor(options = {}) {// save the user configuration getters option wrapGetter(this, constructor) options.getters || {}) resetStoreVM(this, options.state || {}) } } function wrapGetter(store, moduleGetter) { Object.keys(moduleGetter).forEach(getterKey => { const rawGetter = moduleGetter[getterKey] // // For computed, return a function store._wrappedGetters = {} store._wrappedGetters[getterKey] = function wrappedGetter(store) { return rawGetter( store.state, store.getters ) } }) } function resetStoreVM(store, State) {store.getters = {} // Obtain _wrappedGetters const wrappedGetters = store._wrappedgetters // Start concatenation of computed const computed = {} Object.keys(wrappedGetters).forEach(key => { const fn = wrappedGetters[key] computed[key] = () => fn(store) Object.defineProperty(store.getters, key, { get: () => store._vm[key] }) }) store._vm = new Vue({ data: { state }, computed }) }Copy the code

Implement COMMIT: obtain and execute the corresponding mutation according to the user incoming type

Class Store {constructor (options = {}) {/ / save the mutations of user configuration options for this. _mutations = options. The mutations | | {} / / Bind the COMMIT context otherwise there could be problems calling COMMIT in the action! // Bind the action as well, Const store = this const {commit, action} = store this.com MIT = function boundCommit(type, Payload) {commit. Call (store, type, payload)}} Mutations [type] if(! Mutation commit(type, payload) {mutation const entry = this._mutations[type] if(! entry) { console.error(`unknown mutation type: ${type} ') return} // Specify the context to pass the state to the Store (this.state, payload)}}Copy the code

Implement actions: Obtain and execute actions based on the user’s incoming type

Class Store {constructor (options = {}) {/ / save the user write actions options this. _actions = options. Actions | | {} / / Bind the COMMIT context or you could have a problem calling COMMIT in your action!! // Also tie the action, Const store = this const {commit, action} = store this.com MIT = function boundCommit(type, payload) { commit.call(store, type, payload) } this.action = function boundAction(type, payload) { return action.call(store, type, payload) } } dispatch(type, payload) { const entry = this._actions[type] if(! Entry) {console.error(' unknown action type: ${type} ') return} // Specify the context to pass state to the Store (this, payload)}Copy the code

Change the vuex reference in store/index.js

// import Vuex from 'vuex' import Vuex from '.. /myVuex/my-vuex.js'Copy the code

Start the project and see what happens

【 Share, like, watch 】 three consecutive, let more people join us ~~****