First look at the picture, do not understand it does not matter, we first look down, look back after the following, will suddenly see!

What is vuex?

Is a state management mode + library 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.

Why did Vuex appear?

1. When multiple components depend on the same state, the pass-through of multi-layer nested components will be tedious, and there is no way to pass the state between sibling components.

Behavior from different components needs to change the same state. Multiple copies of state that are referenced directly by parent components or changed and synchronized through events have been used in the past. These patterns are very fragile and often result in unmaintainable code.

So here comes Vuex!

When should I use Vuex?

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:

Flux architectures are like glasses: you know when you need them.

How to quote?

1, NPM install vuex –save;

2. Create the store folder under SRC and create index.js

Import Vue from 'Vue 'import Vuex from' Vuex 'vue. use(Vuex) // Register Vuex on Vue const store = new Vuex.Store({// Share data with data store Mutations :{}, // it is used to register changes in the data state, // it is used to filter the shared data. // Address asynchronous changes to shared data // Action commits mutation instead of directly changing the state. Actions :{}, // used to mount modules Vuex allows us to split the store into modules // Each module has its own state, mutation, action, getter, and // even nested submodules -- split the same way from top to bottom:  modules:{ }})export default store;Copy the code

3, introduce: main.js

import store from './store'
new Vue({   store }) 
Copy the code

Five cores:

State: // Used to store shared data

state: {    count: 0},
Copy the code

2. mutations: // Used to change the data

Mutations :{setCount(state){count++; }}Copy the code

Getters: // to filter data

Getters: {// Other getter filterCount: (state) => {return 'I am the filtered count value ${state.count}'}}Copy the code

4, Actions: // Used to change the data (asynchronous, the result is mutations method to change the data)

Ctions :{// context: commit, state, getters: AsycSetCount (context){return new Promise(resolve,reject) => {setTimeout(() => {context.com MIT ('mutations ') resolve(); })}}}, 1000)Copy the code

Modules: // Used to partition the store module

By default, action and mutation within a module are still registered in the global namespace — this allows multiple modules to respond to the same action or mutation

Namespaced: true Adds the module namespace

Import all modules in index.js: import module name 1 from '.... '; Import module name 2 from '.... '; Const store = new vuex. store ({modules:{module name 1, module name 2,...... }})Copy the code

Access:

State: 1, this.$store. State Data variable name; 2. Helper function => mapState helps us generate calculated properties

Computed :{// Map this. data 1 is store.state. Data 1... MapState ([data 1,...] )}Copy the code

Mutations: 1, This. codestore.com MIT (‘ the method name in mutations ‘); 2. The auxiliary function => mapMutations maps methods in the component to store.mit

methods:{ ... 2. mapMutations(open access) )}Copy the code

3. Getters:

$this.$store. Getters. Getter; 2, helper function => mapGetters maps store getters to local computed properties

computed:{ ... MapGetters ([getters method name,... )}Copy the code

1, this.$store.dispatch(‘asycSetCount’); 2. The helper function => mapActions maps methods in the component to store.dispatch

methods:{ ... MapActions ([Actions method name,...] )}Copy the code

5. Modules:

Access to the state:

This.$store.state. Module name. The state name in the module

Visit mutations:

This. codestore.com MIT (‘ module name/method name ‘)

Visit getters:

This.$store. Getters [‘ modulename/method name ‘]

Visit the actions:

This.$store. Dispatch (” module name/method name “);

Modules Auxiliary functions:... MapState/mapActions/mapGetters/mapMutations (' module name, [the state data/method name,... ) Note: Auxiliary functions must be introduced manuallyCopy the code

Access global content within a module with a namespace

Getter: rootState and rootGetters are passed to the action as the third and fourth arguments: contains rootState and rootGetters rootState. Global state data; RootGetters. Global getters method.