Getting Started with Front-End Vue-day07-Getting Started with Vuex

(Creating is not easy, thank you, your support is the biggest motivation for me to move forward, if it is helpful to you after reading it, please leave your footprints)

Table of contents

Custom Create Items

vuex overview

Build a vuex [multi-component data sharing] environment 

Create an empty warehouse

state state

1. Provide data:

2. Usage data:

mutations 

Helper function - mapMutations

actions

Helper function - mapActions 

Getter 

module module (advanced syntax)

access syntax-state

access syntax-getters

access syntax-mutation

access syntax-action

---

Custom Create Items

Goal: Create a custom project shelf based on VueCli

start creating project

 

Select Custom Create Project 

 

Select the features that need to be configured in the file 

 

select version 

Whether to choose history mode

css preprocessor selection 

 

Select the ESLint specification 

Choose when to start checking

 Select the configuration file storage location

whether to save

vuex overview

1. What is it:

Vuex is a state management tool for Vue , and state is data.

Vernacular: vuex is a plug-in that can help us manage vue common data (data shared by multiple components) such as: shopping cart data personal information data

2. Scenario:

① A certain state is used in many components (personal information)

② Multiple components jointly maintain a piece of data (shopping cart)

3. Advantages:

① Jointly maintain a piece of data and centralize data management

②Responsive change

③ Simple operation (vuex provides some auxiliary functions)

Build a vuex [multi-component data sharing] environment 

The effect is three components, sharing a piece of data:

Any component can modify data

The data of the three components are synchronized

Create an empty warehouse

// 这里存放的就是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'

// 插件安装
Vue.use(Vuex)

// 创建仓库
const store = new Vuex.Store()

// 导出给main.js
export default store

state state

1. Provide data:

State provides the only public data source, and all shared data must be stored in State in Store.

In the state object, we can add the data we want to share

2. Usage data:

① Direct access through store

② Through auxiliary functions

mapState is an auxiliary function that helps us automatically map the data in the store to the computed properties of the component

mutations 

Goal: Master the operation process of mutations to modify state data. (Modification of state data can only be done through mutations)

1. Define the mutations object, which stores the method of modifying the state

 2. Submit and call mutations in the component

Commit mutation is ` this.$store.commit('xxx', parameter) ` that can pass parameters 

1. Provide mutation function (with parameters - submit payload payload)

2. Submit and call mutation on the page

 Tips: There can only be one submission parameter. If there are multiple parameters, wrap them into an object and pass them

Helper function - mapMutations

Goal: Master the auxiliary function mapMutations, mapping method

mapMutations is very similar to mapState, it extracts the methods located in mutations and maps them to component methods

actions

Goal: Clarify the basic syntax of actions and handle asynchronous operations.

Description: mutations must be synchronous (easy to monitor data changes, record debugging)

1. Provide action method

2. Dispatch call in the page 

Helper function - mapActions 

mapActions extracts the methods located in actions and maps them to component methods

Getter 

Explanation: In addition to the state, sometimes we need to derive some states from the state . These states depend on the state, and getters will be used at this time

Goal: Master the basic syntax of the core concept getters (similar to computed properties)

For example: a list is defined in the state, which is an array of 1-10, and in the component, all data greater than 5 needs to be displayed

1. Define getters

2. Access getters

① Access getters through store

② Mapping through the auxiliary function mapGetters

module module (advanced syntax)

Since vuex uses a single state tree , all the state of the application will be concentrated into a relatively large object .

When the application becomes very complex, the store object can become quite bloated. (Vuex becomes harder to maintain as the project grows larger)

Module split:

user module: store/modules/user.js

access syntax-state

Goal: Master the access syntax of state in the module

Although it has been divided into modules, the state of the submodule will still be linked to the root-level state, and the attribute name is the module name

Use data from modules:

① Access $store.state.modulename.xxx directly through the module name

② Mapping through mapState

        Default root-level mapping mapState([ 'xxx' ])

        Submodule mapping mapState('module name', ['xxx']) - needs to open the namespace

Access syntax - getters

Goal: Master the access syntax of getters in modules

Use data from getters in a module:

① Access $store.getters['module name/xxx'] directly through the module name

② Mapping through mapGetters

        Default root-level mapping mapGetters([ 'xxx' ])

        Submodule mapping mapGetters('module name', ['xxx']) - needs to open the namespace

 

access syntax - mutation

Goal: Master the calling syntax of mutation in the module

Note: The mutations and actions in the default module will be mounted globally, and the namespace needs to be enabled before they can be mounted to submodules.

Call the mutation in the submodule:

① Directly call $store.commit through store ('module name/xxx', additional parameters)

② Mapping through mapMutations

        Default root-level mapping mapMutations([ 'xxx' ])

        Submodule mapping mapMutations('module name', ['xxx']) - needs to open the namespace

Access syntax - action

Goal: Master the call syntax of action in the module (similarly - direct analogy to mutation is enough)

Note: The mutations and actions in the default module will be mounted globally, and the namespace needs to be enabled before they can be mounted to submodules.

Call the action in the submodule:

① Call $store.dispatch('module name/xxx ', additional parameters) directly through the store

② Mapping through mapActions

        Default root-level mapping mapActions([ 'xxx' ])

        Submodule mapping mapActions('module name', ['xxx']) - needs to open the namespace