Detailed explanation of how to implement vuex (detailed tutorial)
This article mainly introduces how to implement a simple vuex. Now I will share it with you and give you a reference.
First we need to know why we use vuex. Communication between parent and child components can be done using props and custom events, and simple non-parent and child component communication uses bus (an empty Vue instance). Then use vuex to solve complex non-parent-child component communication.
It doesn’t matter if you just know how to use vuex. Everyone can read the documentation and type the code. Don’t you want to know how vuex is implemented? !
Putting aside the source code of vuex, let's first think about how to implement a simple "vuex". How simple is it? I don’t want getters, mutations, actions, etc., I just want state.
Non-parent-child component communication
Before implementation, we have to review the implementation of bus, borrowing the example from the official website:
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})Thinking back to those days, I didn't know where to put the instantiated bus, so I had no choice but to put it under window and keep using window.bus. Although this is fine, it still affects the global scope.
Suddenly one day, I found that I could mount it under the root instance of vue (say goodbye to window.bus from now on), so I got:
var app = new Vue({
el: '#app',
bus: bus
})
// 使用 bus
app.$options.bus
// or
this.$root.$options.busThen I discovered that bus is actually not Only on events can communicate. In fact, bus is a Vue instance, where data is responsive. For example, there are two non-parent-child components under the root instance of app, both of which use bus data, so they respond synchronously.
var bus = new Vue({
data: {
count: 0
}
})Above, subcomponent a modifies count. If subcomponent b uses count, then it can respond to the latest count value.
After saying so much, haven’t you discovered it yet? Isn’t this just about realizing communication between non-components, the state of vuex? !
Encapsulation bus
Yes, encapsulate the bus just now. This is the simplest "vuex" (only with the function of state). First, we will have a root instance app with two non-parent-child components childA and childB .
html The implementation of the code is as follows:
<p id="app"> <child-a></child-a> <child-b></child-b> </p>
Implementation of non-parent-child components
Then there are two non-parent-child components and the implementation of app, child component They all use the count of the bus, which is represented here by store.state, which is consistent with vuex:
// 待实现
const store = new Store(Vue, {
state: {
count: 0
}
})
// 子组件 a
const childA = {
template: '<button @click="handleClick">click me</button>',
methods: {
handleClick () {
this.$store.state.count += 1
}
}
}
// 子组件 b
const childB = {
template: '<p>count: {{ count }}</p>',
computed: {
count () {
return this.$store.state.count
}
}
}
new Vue({
el: '#app',
components: {
'child-a': childA,
'child-b': childB
},
store: store
})See that there is a Store to be implemented in the code. The required parameters, because I am too lazy to use Vue.use() here, so I directly pass Vue as a parameter for use, and then the second parameter is consistent with the parameter we passed in using vuex.
Implementation of Store
The next step is the implementation of Store, a two-step implementation:
Create a bus instance;
Let all sub-components have access to this.$store.
The first step is already mentioned above. The second step mainly uses Vue.mixin to mix globally, but it just finds the root instance with the store and assigns the store on the Vue prototype. It also allows the root instance app to be mixed in without specifically writing mixins.
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", which has the state of vuex, which is enough to allow simple communication between non-parent and child components.
Create a bus instance in the constructor of Store and inject it into the prototype of Vue, so that all components can access this.$store, which is the bus instance. this.$store is a Vue instance, so accessing this.$store.state.count actually accesses data, thereby achieving response synchronization between non-parent and child components. All source code is available here.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
What security vulnerabilities exist when using timing-attack in node applications
Implement one-way in vue component delivery object Binding, how to do it?
How to use TypeScript methods in Vue components (detailed tutorial)
The above is the detailed content of Detailed explanation of how to implement vuex (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1376
52
The easiest way to query the hard drive serial number
Feb 26, 2024 pm 02:24 PM
The hard disk serial number is an important identifier of the hard disk and is usually used to uniquely identify the hard disk and identify the hardware. In some cases, we may need to query the hard drive serial number, such as when installing an operating system, finding the correct device driver, or performing hard drive repairs. This article will introduce some simple methods to help you check the hard drive serial number. Method 1: Use Windows Command Prompt to open the command prompt. In Windows system, press Win+R keys, enter "cmd" and press Enter key to open the command
How to write a simple student performance report generator using Java?
Nov 03, 2023 pm 02:57 PM
How to write a simple student performance report generator using Java? Student Performance Report Generator is a tool that helps teachers or educators quickly generate student performance reports. This article will introduce how to use Java to write a simple student performance report generator. First, we need to define the student object and student grade object. The student object contains basic information such as the student's name and student number, while the student score object contains information such as the student's subject scores and average grade. The following is the definition of a simple student object: public
Quick Start: Use Go language functions to implement a simple library management system
Jul 30, 2023 am 09:18 AM
Quick Start: Implementing a Simple Library Management System Using Go Language Functions Introduction: With the continuous development of the field of computer science, the needs of software applications are becoming more and more diverse. As a common management tool, the library management system has also become one of the necessary systems for many libraries, schools and enterprises. In this article, we will use Go language functions to implement a simple library management system. Through this example, readers can learn the basic usage of functions in Go language and how to build a practical program. 1. Design ideas: Let’s first
How to write a simple online reservation system through PHP
Sep 26, 2023 pm 09:55 PM
How to write a simple online reservation system through PHP. With the popularity of the Internet and users' pursuit of convenience, online reservation systems are becoming more and more popular. Whether it is a restaurant, hospital, beauty salon or other service industry, a simple online reservation system can improve efficiency and provide users with a better service experience. This article will introduce how to use PHP to write a simple online reservation system and provide specific code examples. Create database and tables First, we need to create a database to store reservation information. In MyS
Best practices for using Vuex to manage global state in Vue2.x
Jun 09, 2023 pm 04:07 PM
Vue2.x is one of the most popular front-end frameworks currently, which provides Vuex as a solution for managing global state. Using Vuex can make state management clearer and easier to maintain. The best practices of Vuex will be introduced below to help developers better use Vuex and improve code quality. 1. Use modular organization state. Vuex uses a single state tree to manage all the states of the application, extracting the state from the components, making state management clearer and easier to understand. In applications with a lot of state, modules must be used
How to write a simple music recommendation system in C++?
Nov 03, 2023 pm 06:45 PM
How to write a simple music recommendation system in C++? Introduction: Music recommendation system is a research hotspot in modern information technology. It can recommend songs to users based on their music preferences and behavioral habits. This article will introduce how to use C++ to write a simple music recommendation system. 1. Collect user data First, we need to collect user music preference data. Users' preferences for different types of music can be obtained through online surveys, questionnaires, etc. Save data in a text file or database
How to use PHP to develop simple file management functions
Sep 20, 2023 pm 01:09 PM
Introduction to how to use PHP to develop simple file management functions: File management functions are an essential part of many web applications. It allows users to upload, download, delete and display files, providing users with a convenient way to manage files. This article will introduce how to use PHP to develop a simple file management function and provide specific code examples. 1. Create a project First, we need to create a basic PHP project. Create the following file in the project directory: index.php: main page, used to display the upload table
Install cmake using ubuntu and its simple usage
Jan 01, 2024 am 08:57 AM
Preface: Recently, I suddenly wanted to transfer the development environment to Linux. At the same time, I was also preparing to read some open source codes on github. I found that open source projects are now generally managed with cmake. So I just tinkered with it on my own virtual machine. I didn't know what cmake was at first, but later I roughly understood its role through some fiddling. What it does is actually tell the compiler how to compile and link the source code. You may want to ask if there is no makefile, why do you need it? This involves cross-platform issues. Under the Windows platform, these are managed through project files. If cmake is not used, then we have to write corresponding project files and make for window and Linux systems.
