How to implement a simple vuex and how to implement vuex

How to implement a simple vuex and how to implement vuex

First, we need to know why vuex is used. The prop and custom events can be used to communicate with parent and child components. A simple non-Parent and Child components communicate with the bus (an empty Vue instance ). Vuex is used to solve complicated non-parent-child component communication.

There is nothing to use vuex only. You can read the documentation and knock on the code. Don't you want to know how vuex works ?!

Aside from the vuex source code, let's first think about how to implement a simple "vuex ". How simple is it? I don't want to getter, mutation, action, etc. I only need to state it.

Non-parent-child component communication

Before implementation, let's take a look at the implementation of bus. Here is an example from the official website:

Var bus = new Vue () // triggers the event bus in component. $ emit ('Id-selected', 1) // listen to the event bus in the hook created by component B. $ on ('Id-selected', function (id ){//...})

In those days, the bus after the instantiation had no idea where to put it, and finally had no choice but to put it under the window, which had been used by window. bus. Although this is not a problem, it still affects the global scope.

Suddenly one day, I found that I could mount it under the root instance of the vue (from now on, I said goodbye to window. bus), so I had:

Var app = new Vue ({el: '# app', bus: bus}) // use busapp. $ options. bus // orthis. $ root. $ options. bus

Then we found out that the bus can communicate with each other more than just the on event. In fact, bus is a Vue instance, where data responds. For example, if there are two non-Parent and Child components in the root instance of the app that use the data of the bus, they respond to synchronization.

var bus = new Vue({ data: {  count: 0 }})

Previously, sub-component a modifies the count. If sub-component B is used to count, it will be able to respond to the latest count value.

After talking so much, haven't you found out yet? Does this mean non-component communication? Does vuex state ?!

Encapsulation bus

Yes, just encapsulate the bus. This is the simplest "vuex" (only the state function is available ). First, we will have a root instance app, which has two non-Parent and Child components childA and childB.

The html code is implemented as follows:

<div id="app"> <child-a></child-a> <child-b></child-b></div>

Implementation of Non-parent-child components

Then there are two non-Parent and Child components and app implementations. The sub-components use the count of the bus, which is represented by store. state here, which is consistent with vuex:

// Const store = new Store (Vue, {state: {count: 0}) to be implemented // sub-component aconst childA = {template: '<button @ click = "handleClick"> click me </button>', methods: {handleClick () {this. $ store. state. count + = 1 }}// sub-component bconst childB = {template: '<div> count: {count }}</div>', computed: {count () {return this. $ store. state. count }}new Vue ({el: '# app', components: {'child-a': childA, 'child-B': childB}, store: store })

There is a Store to be implemented in the code. Because Vue. use () is not too easy to use here, You can directly pass Vue as a parameter for use. The second parameter is the same as the parameter passed in with vuex.

Store implementation

The next step is the implementation of the Store. The two steps are as follows:

1. Create a bus instance;
2. Allow sub-components to access this. $ store.

The Vue is used in step 1st. mixin is used for global mixing. However, you only need to find the root instance with a store and assign the value to the store on the Vue prototype. This also allows the root instance app to not write mixins for mixing.

class Store { constructor (Vue, options) {  var bus = new Vue({   data: {    state: options.state   }  })  this.install(Vue, bus) }  install (Vue, bus) {  Vue.mixin({   beforeCreate () {    if (this.$options.store) {     Vue.prototype.$store = bus    }   }  }) }}

The implemented Store is a simple "vuex" with the vuex state, which is sufficient for simple communication between non-Parent and Child components.

Create a bus instance in the Store constructor and inject it into the Vue prototype. this allows all components to access this. $ store, that is, the bus instance. This. $ store is a Vue instance, so accessing this. $ store. state. count actually accesses data, thus implementing response synchronization between non-Parent and Child components. For all source code, see here.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.