This is the 17th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

This tutorial is the introduction tutorial, if there is an error, please point out the front end.

1. What is vuex

Vuex is a state management pattern 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 manner. For details, see vuex.vuejs.org/zh/

Here is a brief introduction to VUEX

2. Installation and introduction

Install vuex first.

npm install vuex --save
Copy the code

It is available after being introduced in main.js.

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in Webpack.base. conf with an alias. import Vue from 'Vue' import App from './App' import router from './router' //vuex use Import Vuex from 'Vuex' vue.use (Vuex) const store = new Vuex.Store({state: {// global variable count: 31231 } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: //vuex must be added to store, components: {app}, template: '< app />'})Copy the code

3. The use of vuex

<template> <div> <script> import HelloWorld2 from './HelloWorld2' import son from './son' export default { name: 'HelloWorld', data () { return { message2:"", cou } }, components:{ HelloWorld2, son },computed: { showData(){ return this.$store.state.count; } } } </script>Copy the code
{$store.state.count}} </div> </template> <script> export default {name: 'HelloWorld2', data() { return { } } } </script>Copy the code

4. Process introduction

As shown in the figure, when vuEX is not used, the process is view-> Actions -> State -> View

​

Mutations -> state->(render)-> Vuecomponent for the vuex process

5.mutation

State change, the only way to change the state in Vuex’s Store is to submit mutation. Mutations in Vuex are very similar to events: each mutation has an event type (type) of a string and a callback function (handler). This callback function is where we actually make the state change, and it takes state as the first argument.

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in Webpack.base. conf with an alias. import Vue from 'Vue' import App from './App' import router from './router' //vuex use Import Vuex from 'Vuex' vue.use (Vuex) const store = new Vuex.Store({state: {// global variable count: Gradigradie: 31231}, mutations: {//state = state addData(state) {// Change state state.count++}}}) vue.config.productionTip = false /* eslint-disable No-new */ new Vue({el: '#app', router, //vuex must be added to store, components: {app}, template: '< app />'})Copy the code

And then execute the change

<template> <div> < {{showData}} <HelloWorld2/> <button type = "button" v-on:click = "changeData">  </template> <script> import HelloWorld2 from './HelloWorld2' import son from './son' export default { name: 'HelloWorld', data () { return { message2:"", } }, components:{ HelloWorld2, son },computed: { showData(){ return this.$store.state.count; }}, methods: {// Use changeData(event){this.store.com MIT ("addData"); } } } </script>Copy the code

6. Getters filtering

You can limit mutation to less than 0 and not reduce it

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in Webpack.base. conf with an alias. import Vue from 'Vue' import App from './App' import router from './router' //vuex use Import Vuex from 'Vuex' Vue. Use (Vuex) const store = new Vuex.Store({state: {// global variables count: 0}, mutations: {//state = state addData(state) {//state = state ++}}, // Filter getters: { getState(state) { if (state.count >= 5) { return 5 } else { return state.count } } } }) Vue.config.productionTip = False /* eslint-disable no-new */ new Vue({el: '#app', router, //vuex must be added to store, components: {app}, template: '<App/>' })Copy the code

A call

{$store.getters. GetState}} </div> </template> <script> export default {name: 'HelloWorld2', data() { return { } } } </script>Copy the code

7.Action– Asynchronous processing

An Action is similar to a mutation, except that an Action commits a mutation instead of directly changing the state. An Action can contain any asynchronous operation. The mutation can only process main.js synchronously. The following is an example:

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in Webpack.base. conf with an alias. import Vue from 'Vue' import App from './App' import router from './router' //vuex use Import Vuex from 'Vuex' Vue. Use (Vuex) const store = new Vuex.Store({state: {// global variables count: 0}, mutations: {//state = state addData(state) {//state = state ++}}, // Filter getters: { getState(state) { if (state.count >= 5) { return 5 } else { return state.count } } }, actions: Mutations (() => {context.com MIT ('addData')}, mutations (() => {context.com MIT ('addData')}, 1000) } } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: //vuex must be added to store, components: {app}, template: '< app />'})Copy the code

Action should be called on send.

<template> <div> < {{showData}} <HelloWorld2/> <button type = "button" v-on:click = "changeData">  </template> <script> import HelloWorld2 from './HelloWorld2' import son from './son' export default { name: 'HelloWorld', data () { return { message2:"", } }, components:{ HelloWorld2, son },computed: { showData(){ return this.$store.getters.getState; Rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows; rows. This.$store.dispatch("addData"); // Should operate the action instead of the action triggering method. } } } </script>Copy the code

8.Module

By using a single state tree, all the state of the application is concentrated into one large object. When the application becomes very complex, the Store object can become quite bloated.

To solve this problem, 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:

For example, the route can be split. The file is not in main.js, put vuex in it, and create store/index.js

Import vuex from 'Vue' import vuex from 'vuex' vue.use (vuex) export default new vuex.Store({state: Mutations: {// mutations = state addData(state) {// mutations = state. Count ++}}, mutations: {// mutations = state addData(state) {// mutations = state. { getState(state) { if (state.count >= 5) { return 5 } else { return state.count } } }, actions: SetTimeout (() => {context.com MIT ('addData')}, 1000)}}})Copy the code

Modify the main js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: //vuex must be added to store, components: {app}, template: '< app />'})Copy the code

We can also take the state out of main.js and create a new store/state.js

export default {
    count: 0
}
Copy the code

Then index.js can be changed to

Import Vue from 'Vue' import vuex from 'vuex' import state from './state' vue.use (vuex) export default new Vuex.store ({state: state, // change the state method mutations: {//state = state addData(state) {//state = state ++}}, // Filter getters: { getState(state) { if (state.count >= 5) { return 5 } else { return state.count } } }, actions: SetTimeout (() => {context.com MIT ('addData')}, 1000)}}})Copy the code

​