Detailed explanation of vuex project structure directory and configuration usage-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of vuex project structure directory and configuration usage

php中世界最好的语言

May 02, 2018 am 10:16 AM

vuex Table of contents Configuration

This time I will bring you a detailed explanation of the use of the vuex project structure directory and configuration. What are the precautions when using the vuex project structure directory and configuration. The following is a practical case, let's take a look.

First of all, here is a serious "advice" from the official website:

The rules that vuex needs to abide by:

1. Application-level state should be concentrated into a single store object.

2. Submitting a mutation is the only way to change the state, and this process is synchronous.

3. All asynchronous logic should be encapsulated into action.

FilesDirectory structure

Relationship between files:

store folder-storage vuex series File

store.js - Introduce vuex, set state data, introduce getter, mutation and action

getter.js - Get the status in the store

mutation.js - The storage place of the function used to change the state in the store

action.js - Submit mutation to modify the state tactfully, and can operate asynchronously

Simple and common writing method

store.js file:

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
 a: '初始值',
 b: 'balabala...'
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

Copy after login

In the main.js file (inject the store from the root component, just like injecting the router):

By registering the store option in the root instance, the store The instance will be injected into all sub-components under the root component, and sub-components can be accessed through this.$store.

import store from './store/index'
new Vue({
 el: '#app',
 router,
 store,
 ...
})

Copy after login

Simple configuration of Getter.js (store's computed properties, accepting state as a parameter)

export default {
  doneTodos: state = >{
   return state.todos.filter(todo = >todo.done)
  }
}

Copy after login

Get (inside the computed properties of a component):

computed: {
 doneTodosCount () { 
  return this.$store.getters.doneTodosCount 
 }
}

Copy after login

can be passed Simple configuration of the getter attribute of the parameter

export default{
 getTodoById: (state) => (id) => { 
  return state.todos.find(todo => todo.id === id) 
 }
}

Copy after login

Get (inside the calculated property of a component):

computed: {
 getTodoById() { 
  return this.$store.getters.getTodoById(‘参数')
 }
}

Copy after login

mutation.js Simple configuration:

export default {
  increment(state) {
   //变更状态
   state.count++
  }
}

Copy after login

Trigger (in the component)

this.$store.commit(state,payload)
actions.js简单配置：
export default{
 action (context) {
 //异步操作
  setTimeout（（）=>{
   //变更状态
   context.commit('mutationFunName'，value)
  }）
 }
}

Copy after login

Trigger (component)

1 2	`this.$store.dispatch('mutationFunctionName')` `2018-04-07 18:13:34`

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to 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

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Dead Rails - How To Tame Wolves

3 weeks ago By DDD

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

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

Java Tutorial

1653

CakePHP Tutorial

1413

Laravel Tutorial

1306

PHP Tutorial

1251

C# Tutorial

1224

Related knowledge

The working principle and configuration method of GDM in Linux system Mar 01, 2024 pm 06:36 PM

Title: The working principle and configuration method of GDM in Linux systems In Linux operating systems, GDM (GNOMEDisplayManager) is a common display manager used to control graphical user interface (GUI) login and user session management. This article will introduce the working principle and configuration method of GDM, as well as provide specific code examples. 1. Working principle of GDM GDM is the display manager in the GNOME desktop environment. It is responsible for starting the X server and providing the login interface. The user enters

Understand Linux Bashrc: functions, configuration and usage Mar 20, 2024 pm 03:30 PM

Understanding Linux Bashrc: Function, Configuration and Usage In Linux systems, Bashrc (BourneAgainShellruncommands) is a very important configuration file, which contains various commands and settings that are automatically run when the system starts. The Bashrc file is usually located in the user's home directory and is a hidden file. Its function is to customize the Bashshell environment for the user. 1. Bashrc function setting environment

How to configure workgroup in win11 system Feb 22, 2024 pm 09:50 PM

How to configure a workgroup in Win11 A workgroup is a way to connect multiple computers in a local area network, which allows files, printers, and other resources to be shared between computers. In Win11 system, configuring a workgroup is very simple, just follow the steps below. Step 1: Open the "Settings" application. First, click the "Start" button of the Win11 system, and then select the "Settings" application in the pop-up menu. You can also use the shortcut "Win+I" to open "Settings". Step 2: Select "System" In the Settings app, you will see multiple options. Please click the "System" option to enter the system settings page. Step 3: Select "About" In the "System" settings page, you will see multiple sub-options. Please click

How to configure and install FTPS in Linux system Mar 20, 2024 pm 02:03 PM

Title: How to configure and install FTPS in Linux system, specific code examples are required. In Linux system, FTPS is a secure file transfer protocol. Compared with FTP, FTPS encrypts the transmitted data through TLS/SSL protocol, which improves Security of data transmission. In this article, we will introduce how to configure and install FTPS in a Linux system and provide specific code examples. Step 1: Install vsftpd Open the terminal and enter the following command to install vsftpd: sudo

MyBatis Generator configuration parameter interpretation and best practices Feb 23, 2024 am 09:51 AM

MyBatisGenerator is a code generation tool officially provided by MyBatis, which can help developers quickly generate JavaBeans, Mapper interfaces and XML mapping files that conform to the database table structure. In the process of using MyBatisGenerator for code generation, the setting of configuration parameters is crucial. This article will start from the perspective of configuration parameters and deeply explore the functions of MyBatisGenerator.

How to install and configure DRBD on CentOS7 system? Tutorial on implementing high availability and data redundancy! Feb 22, 2024 pm 02:13 PM

DRBD (DistributedReplicatedBlockDevice) is an open source solution for achieving data redundancy and high availability. Here is the tutorial to install and configure DRBD on CentOS7 system: Install DRBD: Open a terminal and log in to the CentOS7 system as administrator. Run the following command to install the DRBD package: sudoyuminstalldrbd Configure DRBD: Edit the DRBD configuration file (usually located in the /etc/drbd.d directory) to configure the settings for DRBD resources. For example, you can define the IP addresses, ports, and devices of the primary node and backup node. Make sure there is a network connection between the primary node and the backup node.

Where can I check the configuration of my win11 computer? How to find the configuration information of win11 computer Mar 06, 2024 am 10:10 AM

When we use win11 system, we sometimes need to check the configuration of our computer, but many users are also asking where to check the configuration of win11 computer? In fact, the method is very simple. Users can directly open the system information under settings, and then view the computer configuration information. Let this site carefully introduce to users how to find win11 computer configuration information. How to find win11 computer configuration information. Method 1: 1. Click Start and open Computer Settings. 3. You can view computer configuration information on this page. 2. In the command prompt window, enter systeminfo and press Enter to view the computer configuration.

How to read the catalog when reading on WeChat How to view the catalog Mar 30, 2024 pm 05:56 PM

The mobile version of WeChat Reading App is a very good reading software. This software provides a lot of books. You can read them anytime, anywhere with just one click to search and read them online. All of them are officially authorized and different types of books are neatly arranged. Sort and enjoy a comfortable and relaxing reading atmosphere. Switch the reading modes of different scenarios, update the latest book chapters continuously every day, support online login from multiple devices, and batch download to the bookshelf. You can read it with or without the Internet, so that everyone can discover more knowledge from it. Now the editor details it online Promote the method of viewing the catalog for WeChat reading partners. 1. Open the book you want to view the catalog and click in the middle of the book. 2. Click the three lines icon in the lower left corner. 3. In the pop-up window, view the book catalog

See all articles