preface

Vuex is a state management plug-in developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.

What situations are used under Vue?

Vuex helps us manage shared state and comes with more concepts and frameworks. This requires a trade-off between short-term and long-term benefits.

Using Vuex can be tedious and redundant if you don’t plan to develop large, single-page applications. That’s true — if your application is simple, you’d better not use Vuex. A simple Store pattern is all you need. However, if you need to build a medium to large single-page application, and you’re probably thinking about how to better manage state outside of components, Vuex would be a natural choice. To quote Redux author Dan Abramov:

1. Vuex overview

1.1 How components share data

Parent to child: V-bind Child to parent: V-ON event binding Share data between sibling components:

  • $on The component that receives the data
  • $emit the component that sends the data

1.2 What is Vuex

Vue is a mechanism to implement global state (data) management of components, which can facilitate the sharing of data between components

1.3 Benefits of unified state management using Vuex

  1. Centralized management of shared data in Vuex for easy development and maintenance
  2. It can efficiently realize data sharing between components and improve development efficiency
  3. The data stored in VUEX is responsive and keeps the data in sync with the page in real time

1.4 What kind of data is suitable to store in Vuex

In general, only data shared between components is necessarily stored in VUEX; For private data in the component, it is still stored in the component’s own data

2. Basic use of Vuex

  • Install Vuex dependency packages
npm install vuex --save
Copy the code
  • Import vuex package
import Vuex from 'Vuex'
Vue.use(Vuex)
Copy the code
  • Creating a Store object
Const store = new vuex. store ({// state: {count:0}})Copy the code
  • Mount the Store object to the Vue instance
New Vue ({el: '#app', render: h => h(app), router, // render: h => h(app), render: h => h(app)Copy the code

3. Vuex core concepts

3.1 Overview of core Concepts

The key concepts in Vuex are as follows:

  • State
  • Mutation
  • Action
  • Getter

3.2 the State

State provides the only common data source. All shared data should be stored in the State of Store. For example, open the store.js file in the project and add the data we want to share to the State object, such as: count:0

Const store = new vuex. store({state: {count:0}}) const store = new vuex. store({state: {count:0}})Copy the code

The first way to access data in state in a component

This.$store.state. The global data nameCopy the code

A second way to access data in state in a component

First pour in the mapstate function as needed

import { mapState } from 'vuex'
Copy the code

Use the mapState function you just imported to map global data needed by the current component to computed properties of the current component:

The computed: {... MapState ([' global data name '])}Copy the code

3.3 Motation

  1. Store data can only be changed by mutation, but data in Store cannot be manipulated directly.
  2. This is a slightly more complex way to operate, but you can monitor all data changes centrally
Const store = new vuex. store({state: {count:0}, Mutation mutations: {add(state,step){// The first parameter is always state, which is the $state object // The second parameter is the argument passed when we call add: state.count+=step; }}})Copy the code

The first way to trigger motation in a component

methods: {handle1() {// Use the commit function to call the corresponding function in mutations, This. codestore.com MIT ('add',10)}} this. codestore.com MIT ('add',10)}}Copy the code

Second way to trigger motation in a component

Start by pouring the Mapmutations function on demand

import { mapMutations } from 'vuex'
Copy the code

Through the imported mapMutations function, map the mutations method required by the current component to the method method of the current component:

Methods: {... mapMutations( ['add'] ), Add () { this.add(10) } }Copy the code

3.4 the Action

Action is used to handle asynchronous tasks. If the data is changed by an asynchronous operation, the Action must be used instead of Mutation, but the data must be changed indirectly by triggering Mutation in the Action.

Const store = new vuex. store({state: {count:0}, Mutation mutations: {add(state,step){// The first parameter is always state, which is the $state object // The second parameter is the argument passed when we call add: state.count+=step; } }, actions: { addAsync(context) { setTimeout(() => { context.commit('add', step) }, 1000) } } })Copy the code

The first way to trigger an action in a component

methods: {handle1() {// Use the commit function to call the corresponding function in mutations, $this.$store.dispatch('addAsync',10)}}Copy the code

The second way to trigger an action in a component

First pour in the mapAction function as needed

import { mapActions } from 'vuex'
Copy the code

Map the actions required by the current component to the method method of the current component using the mapActions function we just imported:

Methods: {... mapActions( ['addAsync'] ), AddAsync () { this.addAsync(10) } }Copy the code

3.5 the Getter

Getters are used to process data in a store to form new data.

  1. Getters can process existing data in the store to form new data, type Vue calculation properties
  2. As the data in the Store changes, so does the data in the Getter
// define Getter const store = new vuex. store ({state: {count: 0}, getters: {showNum: State => {return 'current count is ['+ state.count +']'}}})Copy the code

The first way to trigger a getter in a component

{{ $store.getters.showNum}}
Copy the code

The second way to trigger an action in a component

The mapGetters function is first poured in as needed

import { mapGetters } from 'vuex'
Copy the code

Map to the calculated properties of the current component using the mapGetters function you just imported:

Computeds: {... mapGetters( ['showNum'] ), }Copy the code