【Vue】Vuex 用法案例（一篇足以）

文章目录

使用state中的值

示例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			
			{{$store.state.count}}
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//2.创建vuex实例, Store vuex的仓库
			var store = new Vuex.Store({
				//3.定义 仓库中的状态值
				state: {
					count: 10,
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据				
				},
				//4.vuex注册
				store: store,
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

运行结果：

在这里插入图片描述

更改state中的值（mutations+commit）

Vuex中管理的状态值时响应式的，只要有一个组件的值发生变化了，其他组件的值也跟着变化

示例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			Store中的值：{{storeCount}}
			<button @click="changeStateData">更改vuex中的state的值button>
			<child>child>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//创建子组件
			var child = {
				template: `子组件的值： {{stateCount}}`,
				computed: {
					stateCount() {
						return this.$store.state.count;
					},
				},
			};

			//2.创建vuex实例, Store vuex的仓库
			var store = new Vuex.Store({
				//3.定义 仓库中的状态值
				state: {
					count: 10,
				},
				//a.写一个mutation的属性，只能在mutation中修改state的值
				mutations: {
					//vuex的值加一
					changeCount(state) {
						state.count++;
					},
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				//4.vuex注册
				store: store,
				//计算属性
				computed: {
					storeCount() {
						return this.$store.state.count;
					},
				},
				methods: {
					changeStateData() {
						//注意：vuex中不允许直接更改store中的state的值。因为不好追踪
						//this.$store.state.count = this.$store.state.count + 1;
						//更改数据时需要使用 commit提交到mutation
						this.$store.commit("changeCount");
					},
				},
				components: {
					child,
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

运行结果：未点击按钮前

在这里插入图片描述

运行结果：已点击按钮后

在这里插入图片描述

映射state中的值（mapState）

将 store中的state里面的count的值映射到组件里的data的三种方法

示例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			{{count}}
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//1.引入 mapState
			var mapState = Vuex.mapState;

			var store = new Vuex.Store({
				state: {
					count: 10,
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				store: store,
				// 1.数组
				// computed: mapState(["count"]),数组形式,只有数组形式的名字必须和store中的名字相同
				// 2.对象形式，key的值可以自定义
				// computed: mapState({
				//   count1: (state) => state.count,
				// }),
				//3.扩展展开符的形式
				computed: {
					...mapState({
						count: (state) => state.count,
					}),
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

运行结果：

在这里插入图片描述

载荷（mutation）

载荷的用法及其对象形式的写法

示例：点击按钮，count的值加n，n时调用 mutation时传的参数

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			{{count}}
			<button @click="incrementFun">点击count加10button>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//1.引入 mapState
			var mapState = Vuex.mapState;
			var store = new Vuex.Store({
				state: {
					count: 10,
				},
				mutations: {
					//两个参数
					//1.状态值 state，2.载荷
					increment(state, n) {
						state.count += n;
						// commit 对象形式的用法
						// state.count += n.amout;
					},
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				store: store,
				methods: {
					incrementFun() {
						//将state提交到 mutation
						//参数有两个，1.mutation的名字，载荷的值
						this.$store.commit("increment", 10);
						// commit 还可以写成对象形式
            			/* 
            			this.$store.commit("increment", {amout: 10});
            			或者
            			this.$store.commit({
              				type: "increment",
              				amout: 10,
            			});
            			*/
					},
				},
				//3.扩展展开符的形式
				computed: {
					...mapState({
						count: (state) => state.count,
					}),
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

运行结果：未点击按钮前

在这里插入图片描述

运行结果：已点击按钮后

追加state中属性

示例：给state追加一个属性

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			<button @click="addState">追加属性button>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//1.引入 mapState
			var mapState = Vuex.mapState;
			var store = new Vuex.Store({
				state: {
					count: 10,
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				store: store,
				methods: {
					// 给state追加一个属性
					addState() {
						// 基本数据类型可以使用下面的方式追加属性
						this.$store.state.cs = "hello";
						console.log(this.$store.state.cs);
						// 给对象添加属性推荐使用下面这种方式
						this.$store.state.test = {
							...this.$store.state.test,
							newProp: "hello",
						};
						console.log(this.$store.state.test);
						console.log(this.$store.state);
					},
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

运行结果：点击按钮后

在这里插入图片描述

使用state中常量

推荐在state中使用常量

示例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			{{count}}
			<button @click="incrementFun">点击count加10button>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//创建常量
			const INCREMENT = "INCREMENT";
			//1.引入 mapState
			var mapState = Vuex.mapState;
			var store = new Vuex.Store({
				state: {
					count: 10,
				},
				mutations: {
					//两个参数
					//1.状态值 state，2.载荷
					[INCREMENT](state, n) {
						state.count += n.amout;
					},
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				store: store,
				methods: {
					// 给state追加一个属性
					incrementFun() {
						// 将state提交到 mutation
						// 参数有两个，1.mutation的名字，载荷的值
						this.$store.commit(INCREMENT, {
							amout: 10
						});

					},
				},
				// 扩展展开符的形式
				computed: {
					...mapState({
						count: (state) => state.count,
					}),
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

运行结果：点击按钮后

mutation 必须是同步操作

示例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			{{count}}
			<button @click="asyncIncrementFun">延迟2秒加一button>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//1.引入 mapState
			var mapState = Vuex.mapState;
			var store = new Vuex.Store({
				state: {
					count: 10,
				},
				mutations: {
					//两个参数
					//1.状态值 state，2.载荷
					increment1(state) {
						// 在mutations中写了异步操作
						// 我们会跟踪不到最新的结果值
						setTimeout(() => {
							state.count++;
						}, 2000);
					},
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				store: store,
				methods: {
					asyncIncrementFun() {
						this.$store.commit("increment1");
					},
				},
				// 扩展展开符的形式
				computed: {
					...mapState({
						count: (state) => state.count,
					}),
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

运行结果：

actions 中提交异步操作

示例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			{{count}}
			<button @click="asyncIncrementFun">延迟2秒加一button>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//1.引入 mapState
			var mapState = Vuex.mapState;
			var store = new Vuex.Store({
				state: {
					count: 10,
				},
				mutations: {
					//两个参数
					//1.状态值 state，2.载荷
					increment1(state) {
            			state.count++;
          			},
				},
				// 添加action操作，执行异步操作
				// actions 里面一般执行异步操作，和大数据量的处理，
				// actions中不能直接修改 store里面的state的值，只能使用 commit提交到mutation
				actions: {
					asyncIncrement(context) {
						setTimeout(() => {
							//提交到mutation
							context.commit("increment1");
						}, 2000);
					},
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				store: store,
				methods: {
					asyncIncrementFun() {
						//提交到action
						this.$store.dispatch("asyncIncrement");
					},
				},
				// 扩展展开符的形式
				computed: {
					...mapState({
						count: (state) => state.count,
					}),
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

辅助函数（mapMutations+mapActions）

示例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			{{count}}
			<button @click="increment1">加一button>
			<button @click="asyncIncrement">延迟2秒加一button>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//添加辅助函数
			var mapMutations = Vuex.mapMutations;
			var mapActions = Vuex.mapActions;
			//1.引入 mapState
			var mapState = Vuex.mapState;
			var store = new Vuex.Store({
				state: {
					count: 10,
				},
				mutations: {
					//两个参数
					//1.状态值 state，2.载荷
					increment1(state) {
						state.count++;
					},
				},
				//添加action操作，执行异步操作
				//actions 里面一般执行异步操作，和大数据量的处理，
				//actions中不能直接修改 store里面的state的值，只能使用 commit提交到mutation
				actions: {
					asyncIncrement(context) {
						setTimeout(() => {
							//提交到mutation
							context.commit("increment1");
						}, 2000);
					},
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				store: store,
				methods: {
					//在 组件中绑定的函数名必须和 mutations中的函数名相同
					...mapMutations(["increment1"]),
					...mapActions(["asyncIncrement"]),
				},
				// 扩展展开符的形式
				computed: {
					...mapState({
						count: (state) => state.count,
					}),
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

辅助函数（mapGetters）

getters 是state的派生属性，可以避免在组件调用state的派生值时减少使用 computed

示例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			显示学生信息：
			<ul>
				<li v-for="i in stu">{{i.name}}--{{i.age}}li>
			ul>
			显示20岁以下的学员信息：
			<ul>
				<li v-for="i in lessthan20">{{i.name}}--{{i.age}}li>
			ul>

			<br />
			子组件：
			<child>child>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			// getter的辅助函数
			var mapGetters = Vuex.mapGetters;
			//子组件也需要显示 20岁以下的学员信息
			var child = {
				template: `
				            也需要显示 20岁以下的学员信息
				           
				            {{i.name}}--{{i.age}}
				          
				          `,
				computed: {
					// 不用getter这里就得加过滤，过滤20岁以下的学员信息
					// lessthan20() {
					//   return this.$store.getters.lessthan20;
					// },
					...mapGetters(["lessthan20"]),
				},
			};
			var mapState = Vuex.mapState;
			var store = new Vuex.Store({
				state: {
					stu: [{
							id: 1,
							name: "大力",
							age: 19
						},
						{
							id: 2,
							name: "小花",
							age: 22
						},
						{
							id: 3,
							name: "春田",
							age: 16
						},
						{
							id: 4,
							name: "翠花",
							age: 26
						},
					],
				},
				getters: {
					lessthan20(state) {
						return state.stu.filter((item) => item.age < 20);
					},
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				store: store,
				computed: {
					...mapState(["stu"]),
					// 不用getter这里就得加过滤，过滤20岁以下的学员信息
					// lessthan20() {
					//   return this.$store.getters.lessthan20;
					// },
					...mapGetters(["lessthan20"]),
				},
				components: {
					child,
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

运行结果：

vuex 模块化

示例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			<button @click="showStateData">调用 vuex中的数据button>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js">script>
		<script>
			//2.创建vuex实例, Store vuex的仓库
			//定义子模块
			const module1 = {
				state: {
					count: 10
				},
				mutations: {},
				actions: {},
				getters: {},
			};
			const module2 = {
				state: {
					text: "hello"
				},
				mutations: {},
				actions: {},
				getters: {},
			};
			var store = new Vuex.Store({
				modules: {
					a: module1,
					b: module2,
				},
			});
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				// vuex注册
				store: store,
				methods: {
					showStateData() {
						console.log(this.$store.state.a.count);
					},
				},
			})
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

运行结果：点击按钮后

相关阅读:
使用基于注意力的编码器-解码器实现医学图像描述
 初始MySQL(七)(MySQL表类型和存储引擎,MySQL视图,MySQL用户管理)
在html和css中的引用svg（一）
C++ realloc()用法及代码示例
 leetcode 503.下一个更大元素II 单调栈
 1.3 do...while实现1+...100 for实现1+...100
phantomjs 不是内部活外部指令
 【ai】pycharm设置软件仓库编译运行基于langchain的chatpdf
VMware：一个多云+AI的未来
 HTML计时事件（JavaScript）网页电子钟+网页计时器
原文地址：https://blog.csdn.net/qq_45677671/article/details/126194830