Detailed explanation of Vuex overall case

1. Introduction
2. Advantages
3. Usage steps

1. Install Vuex
2. Reference Vuex
3. Create a warehouse Store

4. Included Modules

1.State
2. Getters
3.Mutations
4.Action
5.Modules

5. The simplest project example of Vuex

1. Storing Data
2. Get data
3.Store file directory structure

index.js
state.js
mutations.js
actions.js
getters.js

4. Using store

insert image description here

1. Introduction

Let's take a look at a more professional introduction to Vuex:

Vuex is a state management mode for applications developed specifically for Vue. It uses centralized storage to manage the status of all components of the application and uses corresponding rules to ensure that the status changes in a predictable way.

In short, Vuex uses a global object-like form to manage the common data of all components. If you want to modify the data of this global object, you have to modify it in the way provided by Vuex (you cannot modify it in your own way at will).

2. Advantages

The difference between Vuex state management and using traditional global variables:

Vuex's state storage is responsive: that is, when your component uses the state of this Vuex, once it changes, all associated components will automatically update the corresponding data, which saves developers a lot of trouble.
The state of Vuex cannot be modified directly: If it is a global object variable, it is easy to modify, but this cannot be done in Vuex. If you want to modify it, you have to use the only way provided by Vuex: explicitly submit ( commint ) mutations to implement the modification. The advantage of doing this is that it makes it easy for us to track the changes in each state, which is very practical when debugging during the development process.

3. Usage steps

1. Install Vuex

npm install vuex --save

2. Reference Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3. Create a warehouse Store

To use Vuex, we need to create an instance store , which we call a warehouse, and use this warehouse store to manage our status.

//Create a store
const store = new Vuex.Store({});

4. Included Modules

State : defines the data structure of the application state. You can set the default initial state here.
Getter : Allows components to get data from the store. mapGetters helper function simply maps getter in the store to local computed properties.
Mutation : is the only way to change the state in the store and must be a synchronous function.
Action : Used to submit mutation instead of directly changing the state, and can include any asynchronous operations.
Module : The store can be split into modules. Each module has its own state , mutation , action , getter , and even nested submodules

The role of Vuex is similar to that of a global object. Vuex uses a single state tree and uses an object State to contain all the states of the entire application hierarchy. You can understand these states as a bunch of global variables and data.

Write the picture description here

1. State

Suppose we have a global state count with a value of 5. Then, we can define it as key and value in state object and use it as a global state for us. as follows:

 //Create a store
 const store = new Vuex.Store({
    //state stores the state of the application layer state:{
        count:5 //Total: 5
    }
 });

2. Getters

It can be considered that getters are calculated properties of the store, similar to computed , which can filter and transform the data in the state.

Suppose we want to derive a new state newCount based on state.count , it is appropriate to use our getters

getters accept state as their first argument

const store = new Vuex.Store({
   //state stores the state of the application layer state:{
      count:5 //Total: 5
   },
   getters:{
      newCount:state => state.count * 3
   }
});

Get in component { {newCount}} method:

export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};

3. Mutations

The only way Vuex provides us to modify the state in the warehouse store is by submitting mutation , and it must be同步函數

We defined a function called increment in mutations , and the function body is where we want to make changes.

Will accept state as the first parameter, the second is a custom parameter

 const store = new Vuex.Store({
    //state stores the state of the application layer state:{
        count:5 //Total: 5
    },
    // mutations are the only way to modify data in state mutations:{
        increment(state, value) {
            state.count += value;
        }
    }
 });

When we submit commit , the first parameter "increment" corresponds to the increment method in mutations , and the second parameter is the custom value. For example:

 methods: {
   getVal(event) {
     //Get the current key value let value = event.target.dataset.value;
     //Submit a mutation named increment via commit
     this.$store.commit("increment", value);
   }
 }

Get in component { {count}} method:

export default {
  computed: {
      count(){
          return this.$store.state.count;
      }
  }
};

4. Action

Used to submit mutation instead of directly changing the state, and can include any asynchronous operations
Only through action=>mutations=>states , this process is operated. The specific steps are as follows:

export default new Vuex.Store({
    //Store data state: {
        obj: {},
    },
    //4. Handle mutations using the methods in commit mutations: {
        getParam(state, Object) {
            //5. Modify the data in state state.obj = Object
        }
    },
    //2. Accept the method and parameters passed by dispatch actions: {
        getParamSync(store, Object) {
            // Handle asynchronous operations setTimeout(() => {
                //3. Submit a mutation named getParam through commit
                //The action function receives a store instance object, so you can call store.commit to commit a mutation
                store.commit('getParam', Object);
            }, 1000)
        }
    }
})

Then we can call it in the component.

methods: {
   getVal() {
	  let name= 'xia';
	  let age = '26';
	  let sex = 'man';
	  //1. Pass the method getParamSync and multiple parameters {name, age, sex} to actions through dispatch
	  this.$store.dispatch('getParamSync',{name,age,sex})
   }
}

5. Modules

As the complexity of the project increases, in order to facilitate the management of Vuex, it is generally divided into different Module according to its functions for easy future management. Each module has its own state , mutation , action , getter and even nested submodules

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

import moduleA from './module/moduleA' // module A
import moduleB from './module/moduleB' // module B

Vue.use(Vuex)

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    modules:
        moduleA,
        moduleB
    }
})

moduleA.js / moduleB.js files

// Each module has its own state, mutation, action, getter, and even nested submodules export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

Then we can call it in the component.

<template>
	<div class="demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</template>

computed: {
    getText1(){
    	return this.$store.state.moduleA.text;
    },
    // or ...mapState({
		getText2: state => state.moduleB.text;
	})
}

From this we can see that the state inside the module is local and belongs only to the module itself, so it must be accessed from the outside through the corresponding module name.

5. The simplest project example of Vuex

Use vuex syntax sugar mapMutations and mapGetters

1. Storing Data

a.vue file

import { mapMutations } from "vuex"; // Import mapMutations
export default {
	methods: {
		...mapMutations({
		    // Associate changeNews with SET_NEWS in mutations changeNews: "SET_NEWS"
		}),
		submit(){
			// Submit a mutation named changeNews and pass in the parameter val
			let val = 'test news';
			this.changeNews(val); // equivalent to this.$store.commit("changeNews", val);
		}
	}
}

2. Get data

b.vue file

import { mapGetters } from "vuex"; // Import mapGetters 
export default {
	computed: {
        // Use vuex to read data (the data in getters.js is read)
        // Equivalent to this.$store.getters.news (vuex syntax sugar)
        ...mapGetters(["news"])
	},
	created() {
        // Get the news data in getters console.log(this.news);
	}
}

3. Store file directory structure

Write the picture description here

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

//Every time the state is modified, the log will be printed in the console
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
	actions,
	getters,
	state,
	mutations,
	strict: debug, // Enable strict mode when debug=true (performance loss)
	plugins: debug ? [createLogger()] : []
})

state.js

const state = {
	news: {}
}

export default state;

mutations.js

const mutations = {
	SET_NEWS(state, val) {
		state.news = val
	}
}

export default mutations;

actions.js

//Asynchronous processing const actions = {
    M_NEWS({ commit }, val) {
        commit('SET_NEWS', val); // commit mutations }
}

export default actions;

getters.js

//Usually get data through getters (this.$store.getters.news;)
export const news = state => state.news // Map it out directly without doing any other processing

4. Using store

Reference in main.js

import store from './store' //vuex storage file new Vue({
	el: '#app',
	router,
	store,
	components:
		App
	},
	template: '<App/>'
})

This is the end of this article about the detailed explanation of the overall case of Vuex. For more relevant Vuex content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: