Detailed explanation of the simple use of vuex
This article mainly introduces the simple use of vuex in detail. Now I will share it with you and give you a reference.
1 Directory configuration
Create the store directory in the src directory according to official recommendations
2 Create files in the store
Create actions.js, getters.js, index.js, mutations.js, mutations-types.js, state.js based on official recommendations
2.1 state.js
state.js: It is a single state number of vuex, which contains all application-level states in one object. So far it exists as a "single source of data (SSOT)". This also means that each application will only contain one store instance. A single state tree allows us to directly locate any specific piece of state and easily obtain a snapshot of the entire current application state during debugging. (Used to manage all vuex status data)
/*
* 是vuex的单一状态数，用一个对象就包含了全部的应用层级状态
* 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）
*
*/
const state = {
// 城市状态，用来管理城市
city: {},
cityList: [],
fullScreen: true,
palyer: false
};
export default state;2.2 mutations-types.js Access character constants related to mutations (some constants)
/* * 存取mutations相关的字符常量 * */ // 定义常量并导出 export const SET_CITY = 'SET_CITY'; export const SET_PLAY = 'SET_PLAY'; export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'; export const SET_CITY_LIST = 'SET_CITY_LIST';
2.3 mutations.js (define modified operations)
The only way to change the state in the Vuex store is to submit a mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make state changes, and it will accept state as the first parameter
/*
* 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
* Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
*/
// 导入mutation-type.js里面所有的常量
import * as types from './mutation-types';
// 定义一个mutation可以供设置和修改值
const mutations = {
/*
* 1 表达式作为属性表达式放在方括号之内
* 2 形参state （获取当前状态树的state）
* 3 形参city，是提交mutation时传的参数
* 4 使用mutation便于书写方便
* 5 这个操作相当于往state.js里面写入city
*/
[types.SET_CITY](state, city) {
state.city = city;
},
[types.SET_CITY_LIST](state, list) {
state.cityList = list;
},
[types.SET_FULL_SCREEN](state, flag) {
state.fullScreen = flag;
},
[types.SET_PLAY](state, palyState) {
state.palyer = palyState;
}
};
// 导出mutation
export default mutations;2.4 getters.js Sometimes we need to derive some state from the state in the store.
mapGetters auxiliary function just maps the getters in the store to local calculated properties
/* * 有时候我们需要从 store 中的 state 中派生出一些状态 * 这里的常量主要是对state里面做一些映射 * mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性 */ // 对state里面的属性做一些映射 export const city = state => state.city; // 箭头函数的简写 export const cityList = state => state.cityList; export const fullScreen = state => state.fullScreen; export const palyer = state => state.palyer;
2.5 actions.js
Action is similar to mutation, but the difference is:
Action submits a mutation rather than directly changing the state.
Action can contain any asynchronous operation.
Changing mutations multiple times in one action can encapsulate an action
/*
* actions类似mutation
* 区别：
* 1：action提交的是mutation
* 2：action可以包含任意异步操作
*/
/*
* 使用：
* 1：在一个动作中多次改变mutation可以封装一个action
*/
import * as types from './mutation-types';
export const selectList = function ({commit, state}, {list, index}) {
commit(types.SET_CITY_LIST, list);
commit(types.SET_PLAY, false);
commit(types.SET_FULL_SCREEN, true);
};2.6 index.js entry
/*
* 入口
*/
import Vue from 'vue';
import Vuex from 'vuex';
// import * as obj from 'xxxx'; 会将xxxx中所有export导出的内容组合成一个对象返回。
import * as actions from './actions';
// 拿到getters里面的映射
import * as getters from './getter';
import state from './state';
import mutations from './mutations';
import createdLogger from 'vuex/dist/logger';
Vue.use(Vuex);
const debug = process.env.NODE_ENV != 'production';
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createdLogger()] : []
});3 Use
3.1 Register the store in main.js
Register the store in the new Vue instance in main.js
3.2 Write the value, To introduce the syntactic sugar of mapMutations into the component
Introduce the syntactic sugar
import {mapMutations, mapActions} from 'vuex';In methods, the mapMutations auxiliary function maps the methods in the component to store.commit call
...mapMutations({
// 这里和mutation里面的常量做一个映射
setCity: 'SET_CITY'
})In Write the value where needed
this.setCity(city);
3.3 Get the value
To get the value in vuex, you need to introduce mapGetters in the component (the mapGetters auxiliary function just maps the getters in the store to local calculated properties )
Introduce mapGetters
import {mapGetters} from 'vuex';Use the object spread operator in the computed property to mix the getters into the computed object
computed: {
// 这里面的city映射的是state.js里面的city
// 可以映射多个值
...mapGetters([
'city',
'cityList',
'palyer',
'fullScreen'
])
}Get the value
created() {
console.log(this.city);
console.log(this.cityList[1]);
console.log(this.palyer);
console.log(this.fullScreen);
}3.4 action deposit value
...mapActions(['selectList'])
Use it where it needs to be deposited
this.selectList({
list: this.citys,
index: 1
});The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Two ways for Vue single-page application to reference separate style files
Based on the storage key value in js Introduction to and precautions
angular4 Example of shared service data communication in multiple components
The above is the detailed content of Detailed explanation of the simple use of vuex. 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 use magnet links
Feb 18, 2024 am 10:02 AM
Magnet link is a link method for downloading resources, which is more convenient and efficient than traditional download methods. Magnet links allow you to download resources in a peer-to-peer manner without relying on an intermediary server. This article will introduce how to use magnet links and what to pay attention to. 1. What is a magnet link? A magnet link is a download method based on the P2P (Peer-to-Peer) protocol. Through magnet links, users can directly connect to the publisher of the resource to complete resource sharing and downloading. Compared with traditional downloading methods, magnetic
How to use mdf and mds files
Feb 19, 2024 pm 05:36 PM
How to use mdf files and mds files With the continuous advancement of computer technology, we can store and share data in a variety of ways. In the field of digital media, we often encounter some special file formats. In this article, we will discuss a common file format - mdf and mds files, and introduce how to use them. First, we need to understand the meaning of mdf files and mds files. mdf is the extension of the CD/DVD image file, and the mds file is the metadata file of the mdf file.
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
What software is crystaldiskmark? -How to use crystaldiskmark?
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark is a small HDD benchmark tool for hard drives that quickly measures sequential and random read/write speeds. Next, let the editor introduce CrystalDiskMark to you and how to use crystaldiskmark~ 1. Introduction to CrystalDiskMark CrystalDiskMark is a widely used disk performance testing tool used to evaluate the read and write speed and performance of mechanical hard drives and solid-state drives (SSD). Random I/O performance. It is a free Windows application and provides a user-friendly interface and various test modes to evaluate different aspects of hard drive performance and is widely used in hardware reviews
How to download foobar2000? -How to use foobar2000
Mar 18, 2024 am 10:58 AM
foobar2000 is a software that can listen to music resources at any time. It brings you all kinds of music with lossless sound quality. The enhanced version of the music player allows you to get a more comprehensive and comfortable music experience. Its design concept is to play the advanced audio on the computer The device is transplanted to mobile phones to provide a more convenient and efficient music playback experience. The interface design is simple, clear and easy to use. It adopts a minimalist design style without too many decorations and cumbersome operations to get started quickly. It also supports a variety of skins and Theme, personalize settings according to your own preferences, and create an exclusive music player that supports the playback of multiple audio formats. It also supports the audio gain function to adjust the volume according to your own hearing conditions to avoid hearing damage caused by excessive volume. Next, let me help you
How to use Baidu Netdisk app
Mar 27, 2024 pm 06:46 PM
Cloud storage has become an indispensable part of our daily life and work nowadays. As one of the leading cloud storage services in China, Baidu Netdisk has won the favor of a large number of users with its powerful storage functions, efficient transmission speed and convenient operation experience. And whether you want to back up important files, share information, watch videos online, or listen to music, Baidu Cloud Disk can meet your needs. However, many users may not understand the specific use method of Baidu Netdisk app, so this tutorial will introduce in detail how to use Baidu Netdisk app. Users who are still confused can follow this article to learn more. ! How to use Baidu Cloud Network Disk: 1. Installation First, when downloading and installing Baidu Cloud software, please select the custom installation option.
How to use NetEase Mailbox Master
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox, as an email address widely used by Chinese netizens, has always won the trust of users with its stable and efficient services. NetEase Mailbox Master is an email software specially created for mobile phone users. It greatly simplifies the process of sending and receiving emails and makes our email processing more convenient. So how to use NetEase Mailbox Master, and what specific functions it has. Below, the editor of this site will give you a detailed introduction, hoping to help you! First, you can search and download the NetEase Mailbox Master app in the mobile app store. Search for "NetEase Mailbox Master" in App Store or Baidu Mobile Assistant, and then follow the prompts to install it. After the download and installation is completed, we open the NetEase email account and log in. The login interface is as shown below
Simple guide to pip mirror source: easily master how to use it
Jan 16, 2024 am 10:18 AM
Get started easily: How to use pip mirror source With the popularity of Python around the world, pip has become a standard tool for Python package management. However, a common problem that many developers face when using pip to install packages is slowness. This is because by default, pip downloads packages from Python official sources or other external sources, and these sources may be located on overseas servers, resulting in slow download speeds. In order to improve download speed, we can use pip mirror source. What is a pip mirror source? To put it simply, just
