Vuex improvement learning sharing
This article mainly introduces the Vuex improvement learning chapter. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let's follow the editor and take a look. I hope it can help everyone?
In the previous article we talked about how to change the data objects in store.js through some simple actions. In actual work, this is completely unable to meet the work needs, so in this article we will talk about how Make some simple process judgments.
Self-made vuex LOGO
1. For example, I have such a demand now. When count < 5, Stop count--. This requires actions
actions to define the actions to be executed, such as process judgment and asynchronous requests
In the actions in store.js
// 定义 actions ，要执行的动作，如流程的判断、异步请求
const actions ={
increment({commit,state}){
commit('increment')
},
decrement({ commit, state }) {
// **通过动作改变的数据，在此处来做判断是否提交**
if (state.count > 5) {
commit('decrement')
}
}
}Run the project
2. Simulate asynchronous requests through actions
1. First in App Define events in .vue
<template>
<p id="app">
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
//异步请求事件
<button @click="incrementAsync">异步增加</button>
<h1>{{count}}</h1>
</p>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
name: 'app',
computed:mapGetters([
'count'
]),
methods:mapActions([
'increment',
'decrement',
'incrementAsync'
])
}
</script>2. Add asynchronous Promise events in actions in store.js
// 定义 actions ，要执行的动作，如流程的判断、异步请求
const actions ={
increment({commit,state}){
commit('increment')
},
decrement({ commit, state }) {
// **通过动作改变的数据，在此处来做判断是否提交**
if (state.count > 5) {
commit('decrement')
}
},
incrementAsync({commit,state}){
// 模拟异步操作
var a = new Promise((resolve,reject) => {
setTimeout(() => {
resolve();
}, 3000);
})
// 3 秒之后提交一次 increment ，也就是执行一次 increment
a.then(() => {
commit('increment')
}).catch(() => {
console.log('异步操作失败');
})
}
}Run the project
##3. Get the data status
If we need to know the odd and even numbers of the data, then It needs to be judged in getters. Getters can obtain processed data to determine the statusvar getters={
count(state){
return state.count
},
EvenOrOdd(state){
return state.count%2==0 ? '偶数' : '奇数'
}
}<template>
<p id="app">
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
<button @click="incrementAsync">异步增加</button>
<h1>{{count}}</h1>
<!-- 判断奇偶数的方法 这种写法它会自动调用 EvenOrOdd 方法中的返回值，拿到的是个属性 -->
<h1>{{EvenOrOdd}}</h1>
</p>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
name: 'app',
computed:mapGetters([
// 判断奇偶数的方法
'EvenOrOdd',
'count'
]),
methods:mapActions([
'increment',
'decrement',
'incrementAsync'
])
}
</script>
Based on Vue, Vuex, Vue-router implementation Animation switching function
About Vuex’s family bucket status management
vuex concept understanding and practical tutorial
The above is the detailed content of Vuex improvement learning sharing. 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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
How to share Quark Netdisk to Baidu Netdisk?
Mar 14, 2024 pm 04:40 PM
Quark Netdisk and Baidu Netdisk are very convenient storage tools. Many users are asking whether these two softwares are interoperable? How to share Quark Netdisk to Baidu Netdisk? Let this site introduce to users in detail how to save Quark network disk files to Baidu network disk. How to save files from Quark Network Disk to Baidu Network Disk Method 1. If you want to know how to transfer files from Quark Network Disk to Baidu Network Disk, first download the files that need to be saved on Quark Network Disk, and then open the Baidu Network Disk client. , select the folder where the compressed file is to be saved, and double-click to open the folder. 2. After opening the folder, click "Upload" in the upper left corner of the window. 3. Find the compressed file that needs to be uploaded on your computer and click to select it.
New title: NVIDIA H200 released: HBM capacity increased by 76%, the most powerful AI chip that significantly improves large model performance by 90%
Nov 14, 2023 pm 03:21 PM
According to news on November 14, Nvidia officially released the new H200 GPU at the "Supercomputing23" conference on the morning of the 13th local time, and updated the GH200 product line. Among them, the H200 is still built on the existing Hopper H100 architecture. However, more high-bandwidth memory (HBM3e) has been added to better handle the large data sets required to develop and implement artificial intelligence, making the overall performance of running large models improved by 60% to 90% compared to the previous generation H100. The updated GH200 will also power the next generation of AI supercomputers. In 2024, more than 200 exaflops of AI computing power will be online. H200
How to share NetEase Cloud Music to WeChat Moments_Tutorial on sharing NetEase Cloud Music to WeChat Moments
Mar 25, 2024 am 11:41 AM
1. First, we enter NetEase Cloud Music, and then click on the software homepage interface to enter the song playback interface. 2. Then in the song playback interface, find the sharing function button in the upper right corner, as shown in the red box in the figure below, click to select the sharing channel; in the sharing channel, click the "Share to" option at the bottom, and then select the first "WeChat Moments" allows you to share content to WeChat Moments.
How to share files with friends on Baidu Netdisk
Mar 25, 2024 pm 06:52 PM
Recently, Baidu Netdisk Android client has ushered in a new version 8.0.0. This version not only brings many changes, but also adds many practical functions. Among them, the most eye-catching is the enhancement of the folder sharing function. Now, users can easily invite friends to join and share important files in work and life, achieving more convenient collaboration and sharing. So how do you share the files you need to share with your friends? Below, the editor of this site will give you a detailed introduction. I hope it can help you! 1) Open Baidu Cloud APP, first click to select the relevant folder on the homepage, and then click the [...] icon in the upper right corner of the interface; (as shown below) 2) Then click [+] in the "Shared Members" column 】, and finally check all
How to increase critical hit rate in Love and Deep Space
Mar 23, 2024 pm 01:31 PM
The characters in Love and Deep Sky have various numerical attributes. Each attribute in the game has its own specific role, and the critical hit rate attribute will affect the damage of the character, which can be said to be a very important attribute. , and the following is the method to improve this attribute, so players who want to know can take a look. Method 1. Core method for increasing the critical hit rate of Love and Deep Space. To achieve a critical hit rate of 80%, the key lies in the sum of the critical hit attributes of the six cards in your hand. Selection of Corona Cards: When selecting two Corona Cards, make sure that at least one of their core α and core β sub-attribute entries is a critical hit attribute. Advantages of the Lunar Corona Card: Not only do the Lunar Corona cards include critical hit in their basic attributes, but when they reach level 60 and have not broken through, each card can provide 4.1% of the critical hit.
Mango tv member account sharing 2023
Feb 07, 2024 pm 02:27 PM
Mango TV has various types of movies, TV series, variety shows and other resources, and users can freely choose to watch them. Mango TV members can not only watch all VIP dramas, but also set the highest definition picture quality to help users watch dramas happily. Below, the editor will bring you some free Mango TV membership accounts for users to use, hurry up and take a look Take a look. Mango TV latest member account free sharing 2023: Note: These are the latest member accounts collected, you can log in directly and use them, do not change the password at will. Account number: 13842025699 Password: qds373 Account number: 15804882888 Password: evr6982 Account number: 13330925667 Password: jgqae Account number: 1703
Solve the problem that Discuz WeChat sharing cannot be displayed
Mar 09, 2024 pm 03:39 PM
Title: To solve the problem that Discuz WeChat shares cannot be displayed, specific code examples are needed. With the development of the mobile Internet, WeChat has become an indispensable part of people's daily lives. In website development, in order to improve user experience and expand website exposure, many websites will integrate WeChat sharing functions, allowing users to easily share website content to Moments or WeChat groups. However, sometimes when using open source forum systems such as Discuz, you will encounter the problem that WeChat shares cannot be displayed, which brings certain difficulties to the user experience.
Share two installation methods for HP printer drivers
Mar 13, 2024 pm 05:16 PM
HP printers are essential printing equipment in many offices. Installing the printer driver on the computer can perfectly solve problems such as the printer being unable to connect. So how to install HP printer driver? The editor below will introduce you to two HP printer driver installation methods. The first method: download the driver from the official website 1. Search the HP China official website in the search engine, and in the support column, select [Software and Drivers]. 2. Select the [Printer] category, enter your printer model in the search box, and click [Submit] to find your printer driver. 3. Select the corresponding printer according to your computer system. For win10, select the driver for win10 system. 4. After downloading successfully, find it in the folder
