Vuex knowledge summary

Vuex knowledge summary

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 the application, and uses corresponding rules to ensure that the state changes in a predictable manner

two, state

Vernacular: a place dedicated to declaring global variables

Official term: state is an attribute that stores all public states. If there is a public state data, it only needs to be defined in the state object

statement:

state:{
	a:123,
	count:0
}

use:

$store.state.count

Optimized to use:

<h1>{
   
   {myCount}}</h1>

<script>
computed:{
	myCount() {
		return this.$store.state.count
	}
}
</script>

The helper function uses:

<h1>{
   
   {count}}</h1>
import { mapState } from "vuex"
computed: {
	...mapState(["count"])
}

scenes to be used:

When a variable needs to be used in multiple vue files, the variable can be declared as a global variable in the state

Three, mutations

Vernacular: mutations are objects (properties) specially used to modify variables in the state

Official term: state data can only be modified through mutations, and must be updated synchronously (that is, there cannot be asynchronous code in it)

Definition: (define mutations, and define functions that modify the count variable)

mutations： {
	addCount(state, payload) {
		// state: 这个是内置的参数，指的就是mutations同级的state属性
		// payload: 调用函数时传入的参数
		state.count += payload
	}
}

use:

<button @click="$store.commit('addCount', 5)">

Optimized to use:

<button @click="changeCount(6)">
// 通过事件处理函数来调用commit方法，实现修改count的值
methods: {
	changeCount(num) {
		this.$store.commit("addCount", num)
	}
}

helper function

<button @click="addCount(6)"> // 直接使用解构出来的addCount函数
import { mapState, mapMutations } from "vuex"
methods: {
	changeCount(num) {
		this.$store.commit("addCount", num)
	}
	// 通过辅助函数引入addCount函数，并把addCount解构到methods中
	...mapMutations(["addCount"])
}

scenes to be used:

When we need to modify the value of variables in the state, we need to use mutations at this moment

Four, actions

In plain English: actions can call functions in mutations through asynchronous operations to modify variables in state.

Official terms: state stores data, mutations update data synchronously, and actions assist asynchronous operations.

definition:

actions: {
getAsyncCount(store, num) {
	// store: 内置的参数，指的是vuex.store的实例
	// 需求：1秒后更新state中count的值
	setTimeout(() => {
		// 因为store已经通过参数可以获取到了，这里可以直接通过store调用commit方法
		store.commit("addCount", num)
	}, 1000);
}
}

use:

// 点击按钮的时候，通过dispatch方法调用actions中的函数从而更新state中变量的值
<button @click="$store.dispatch('getAsyncCount, 10')">

Optimized to use:

<button @click="changeCount(4)">
methods: {
	changeCount(num) {
		this.$store.dispatch("getAsyncCount", num)
	}
}

Helper function:

<button @click="getAsyncCount(100)">
import { mapActions } from "vuex"
computed: {
	changeCount(num) {
		this.$store.dispatch("getAsyncCount", num)
	}
	...mapActions(["getAsyncCount"]) // 数组的形式通过辅助函数把actions里面函数导入，然后通过解构方法把函数解构到methods中
}

scenes to be used:

When we need to modify the value of the variable in the state, we need to use actions at this moment

Five, getters

Plain language: In addition to state can declare global variables, you can also use getters to declare global variables, but the variables declared by getters are derived from state, and getters are equivalent to computed properties in vue.

Official words: In addition to state, sometimes we need to derive some states from state, these states depend on state, and getters will be used at this time

definition:

<h1>{
   
   { $store.getters.filterList }}</h1>
state: {
	a: 123,
	count: 0,
	list: [1,2,3,4,5,6,7,8,9,10]
}
getters: {
	// 声明变量，值是一个函数，这个函数必须要有返回值
	// 需求：页面中需要用到state中的list数组中大于5的数据
	filterList: (state) => {
		// state：内置参数，指的就是和getter同级的state属性
		return state.list.filter(item => item > 5)
	}
}

Optimized to use:

<h1>{
   
   { filterList }}</h1>
computed: {
	// getters中属性的优化使用可以利用计算属性进行简化使用
	filterList() {
		return this.$store.getters.filterList
	}
}

Helper function:

<h1>{
   
   { filterList }}</h1>
import { mapGetters } from "vuex"
computed: {
	// 通过辅助函数获取到getters中的变量，然后解构到计算属性中
	...mapGetters(["filterList"])
}

scenes to be used:

// 简化state中值的获取
<h1>{
   
   { $store.getters.pr }}</h1>
state: {
	obj: {
		student: {
			name: "小明",
			age: 12,
			address: {
				pr: "广东省"
			}
		}
	}
}
getters: {
	pr: (state) => {
	return state.obj.student.address.pr
	}
}

Six, module

Vernacular: Manage our global variables by module, which is conducive to the later maintenance of the project.

Official term: Due to the single state tree, all the states of the application will be concentrated in a relatively large state object. When the application becomes complex, the code will become quite bloated, and vuex will become more and more difficult to maintain, so There is the modularization of vuex.

definition:

modules: {
	user: {
		state: {
			token: "12345"
		},
		mutations: {},
		actions: {},
		getters: {},
		modules: {}
	},
	setting: {
		state: {
			name: "vuex实例"
		}
	}
}

use:

<h1>获取user模块中的token：{
   
   { $store.state.user.token }}</h1>
<h1>获取setting模块中的name：{
   
   { $store.state.setting.name }}</h1>

Use getters to simplify the use of variables in modules:

getters: {
	pr: (state) => {
	return state.obj.student.address.pr
	},
	token: state => state.user.token,
	name: state => state.setting.name
}

<h1>获取user模块中的token：{
   
   { token }}</h1>
<h1>获取setting模块中的name：{
   
   { name }}</h1>
import { mapGetters } from "vuex"
computed: {
	// 通过辅助函数将token和name解构到计算属性中
	...mapGetters(["token", "name"])
}

By default: variables declared in mutations, actions, and getters in the module are all mounted to the global namespace

<button @click="$store.commit('updateToken')">
<button @click="$store.dispatch('aysncChangeToken')">

modules: {
	user: {
		state: {
			token: "12345"
		},
		mutations: {
			updateToken(state) {
				state.token = 666
			}
		},
		actions: {
			aysncChangeToken(store) {
				setTimeout(() => {
					store.commit("updateToken")
				}, 1000)
			}
		},
		getters: {},
		modules: {}
	},
	setting: {
		state: {
			name: "vuex实例"
		}
	}
}

Namespace - locked

By default, mutations, actions, getters, declared variables or functions in each module are in the global namespace, so they are not closed (no independent space), if you want each module to have an independent name Space, you need to add the namespaced attribute to the module and the value is true. At this moment, the mutations, actions, getters, declared variables or functions in the module become local variables or functions (equivalent to adding a lock to the module), and access their At this time, the module name must be added to access successfully.

<button @click="$store.commit('user/updateToken')">
<button @click="$store.dispatch('user/aysncChangeToken')">

modules: {
	namespaced: true, // true表示为user模块加了一道锁
	user: {
		state: {
			token: "12345"
		},
		mutations: {
			updateToken(state) {
				state.token = 666
			}
		},
		actions: {
			aysncChangeToken(store) {
				setTimeout(() => {
					store.commit("updateToken")
				}, 1000)
			}
		},
		getters: {},
		modules: {}
	},
	setting: {
		state: {
			name: "vuex实例"
		}
	}
}

Standalone module - use of helper functions:

import { mapState, mapMutations } from "vuex"
methods: {
	// 调用具有独立空间的模块中的函数，需要通过以下语法获取
	// 语法：mapMutations(模块名, ["函数名"])
	// 通过辅助函数把user模块中的updateToken函数解构到methods中，然后就可以直接使用了
	...mapMutations("user", ["updateToken"])
}