Introduction to the

Vuex is a state management mode 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.

If you don’t have a lot of repetitive operations and data in your code, vuex can be left out. In general, it is used for storing user data and repeating operations

Vue2

  1. You need to introduce Vue and Vuex and you need to use vue.use (Vuex). In main.js you need to import store and register store.

Then you can code vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    content:'learning vuex'}})Copy the code

Set the state object for global access and put whatever state is needed

usethis. $store. State. The content for valueCopy the code
  1. Getters Getter is actually similar to computed and can listen for changes in state values in VUex
getters:{
	getContent(state)
	return state.count
}
Copy the code

You can use this.$store.getters. GetCount to get the value

  1. mutations

The only way to change the store value is to add the mutations method to the store via mutation

mutations:{
	update(state,num)
	state.context = num
}
Copy the code

Use the update

methods:{
	updateContext(){
		this.$store.commit('update'.'111')}}Copy the code

  1. Actions Similar to mutations, actions cannot change the status directly, but requires mutations to submit changes to the status. Actions can operate asynchronously

    Create an Actions

actions:{
	updateContext(context,num){ // Assume an asynchronous operation
	context.commit('update',num)
	}
}
Copy the code
Business code needs to be committed using DispatchCopy the code
methods:{
	add(){
		this.$store.dispatch('updateContext'.1)}}Copy the code
  1. Auxiliary functions mapState, mapGetters, and mapActions can be replaced by auxiliary functions. Method of use
/ / HTML code

<span>{{this.$store.state.context}}</span>
<button @click="update(111)">Click Add Total</button>
Copy the code
import{mapState,mapGetters,mapActions,mapMutations} from'vuex'
export default {
	computed: {... mapState({num:state= >state.content,
		})
	},
	methods: {... mapMutation({update:'update' Update is the corresponding method name for Mutations, and an additional key can be set
		})

		...mapActions({
			updateDemo:"updateContext" // Set an alias
		})
		// Call todosAlise to get the return value. mapGetters({todosAlise:'getToDo'})},created: {//this.$store.dispatch('updateContext',1) triggers dispatch directly from store to change state
		this.updateDemo() // Trigger mutations via mapActions to change the state value}}Copy the code

vue3.x

Vuex in VUe3 does not change much when importing createStore from Vuex

import { createStore } from 'vuex'

export default createStore({
  state: {},mutations: {},actions: {},modules: {}})Copy the code

Using Vuex has also changed a bit

import { defineComponent } from 'vue'
import { useStore } from 'vuex';

export default defineComponent({
  setup () {
    // A store variable needs to be created
    const store = useStore();

    // Use store to manipulate Vuex's API
    // ...}})Copy the code