Vuex知识点

最新推荐文章于 2022-07-08 09:26:03 发布

Lee_mons

最新推荐文章于 2022-07-08 09:26:03 发布

阅读量935

点赞数 1

分类专栏： vue 文章标签：前端 javascript css3

本文链接：https://blog.youkuaiyun.com/Cat_Jay_Fish/article/details/121338341

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了Vuex的状态管理，包括理解Vuex的各个js文件的作用，如State、Getters、Mutations和Actions。通过实例演示了如何在Vue项目中配置Vuex环境，实现数据的取值、存值以及异步加载和后台调用。重点讲解了Vuex的取值推荐方法和异步操作，强调了Mutation的同步性以及Action对于异步操作的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

课程目标

1.了解vuex中的各个js文件的用途

2.利用vuex同步存值

3.利用vuex取值

4.vuex的异步加载问题及后台调用问题

一.了解vuex中的各个js文件的用途

1、学习vuex的原因：

vuex用来管理整个spa项目前后端分离的前端变量

变量传值的演变形式：

Vuex中的各个组件：

官方图解Vuex：

2. Vuex
官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），
让其在各个页面上实现数据的共享包括状态，并且可操作

Vuex分成五个部分：
1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

二、利用vuex取值

1、安装配置Vuex环境

npm install vuex -S

2、创建store目录（src/store）

①、src/store创建（首字母大写）

（1）State.js：存储变量

（2）Mutations.js

（3）Actions.js

（4）Getters.js

所有js里面都写：

export default{
	
}

再创建一个index.js文件，用于整合四个js文件

index.js包含State.js、Mutations.js、Actions.js、Getters.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './State'
import getters from './Getters'
import actions from './Actions'
import mutations from './Mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
 	state,
 	getters,
 	actions,
 	mutations
 })

 export default store

main.js中添加：

import store from './store'

定义store组件

使spa项目具备vuex的功能

查看表设计新建VuexPage1

3 计算属性完成点击用户管理的时候跳到VuexPage1.vue这个组件

①、 src/views/sys/下新建：

VuexPage1.vue

<template>
  <div>
    <h3>页面一：欢迎来到{{msg}}</h3>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
    }
  },
  /* 计算属性*/
  computed:{
    msg(){
      return "KFC";
    }
  }
}
</script>
<style>
</style>

②、配置路由

import VuexPage1 from '@/views/sys/VuexPage1'

3、使用vuex完成VuexPage1.vue发生变化时VuexPage2.vue跟着变化

①、src/views/sys/下新建：

VuexPage2.vue

<template>
  <div>
    <h3>页面二：欢迎来到{{msg}}</h3>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
    }
  },
  /* 计算属性*/
  computed:{
    msg(){
      // return "KFC";
       return this.$store.state.resturantName;
    }
  }
}
</script>
<style>
</style>

②、配置路由

import VuexPage2 from '@/views/sys/VuexPage2'

③、修改State.js

export default{
	resturantName:'王者荣耀'
}

④、修改VuexPage1.vue

<template>
	<div>
		<h3>页面1:欢迎来到{{msg}}</h3>
		<button @click="shangxian">上线</button>
	</div>
</template>

<script>
	export default{
		name:',',
		data(){
			return {
				
			}
		},
		methods:{
			shangxian(){
				this.$store.commit("setResturantName",{
					resturantName:"和平精英"
				})
			}
		},
		computed:{
			msg(){
				// return "KFC";
				return this.$store.state.resturantName;
			}
		}
	}
</script>

<style>
</style>

界面展示

5、取值推荐方法

①、

这个取值方法对类而言，安全性和封装性不高，

所以不推荐

return this.$store.state.resturantName;

②、使用get/set写法

（1）修改Getters.js

export default{
getResturantName:(state)=>{
return state.resturantName;
}
}

（2）修改VuexPage1.vue

/* 计算属性*/
computed:{
msg(){
// return "KFC";
//return this.$store.state.resturantName;
return this.$store.getters.getResturantName;
}
}

得到结果一样，推荐使用；

三、Vuex存值

1、修改Mutations.js

export default{
setResturantName:(state,payload)=>{
state.resturantName=payload.resturantName;
}
}

payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器

一定要记住，Mutation 必须是同步函数。为什么呢？异步方法，我们不知道什么时候状态会发生改变，所以也就无法追踪了

如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了

2、修改VuexPage1.vue

<template>
	<div>
		<h3>页面1:欢迎来到{{msg}}</h3>
		<button @click="shangxian">上线</button>
	</div>
</template>

<script>
	export default{
		name:'',
		data(){
			return {
				
			}
		},
		methods:{
			shangxian(){
				this.$store.commit("setResturantName",{
					resturantName:"和平精英"
				})
			},
			
		},
		computed:{
			msg(){
				// return "KFC";
				// return this.$store.state.resturantName;
				return this.$store.getters.getResturantName;
			}
		}
	}
</script>

<style>
</style>

3、页面展示

点击VuexPage1上线的按钮时内容改变，同时VuexPage2也会跟着改变

①、未点击

②、点击上线

四、Vuex的异步加载问题及后台调用问题

异步修改值

1、修改Actions.js

export default{
	setResturantNameAsync:(context,payload)=>{
		//context等价于this.$store,也就是它代表了vuex的上下文
		//在这个文件中是可以调用同步文件，也就是mutations.js定义的同步方法
		setTimeout(function(){
			context.commit("setResturantName",payload);
		},6000);
		// state.resturantName=payload.resturantName;
	}
}

Action类似于 mutation，不同在于：

（1）Action提交的是mutation，而不是直接变更状态

（2）Action可以包含任意异步操作

（3）Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性

但是他们并不是同一个实例，context 包含：

①. state、②. rootState、③. getters、④. mutations、⑤.on，或者通过 context.state 和 context.getters 来获取 state 和 getters。

2、 VuexPage1.vue

通过dispatch调用Actions.js里面的setResturantNameAsync方法

<template>
	<div>
		<h3>页面1:欢迎来到{{msg}}</h3>
		<button @click="shangxian">上线</button>
		<button @click="shangxianAsync">头号玩家</button>
	</div>
</template>

<script>
	export default{
		name:'',
		data(){
			return {
				
			}
		},
		methods:{
			shangxian(){
				this.$store.commit("setResturantName",{
					resturantName:"和平精英"
				})
			},
			shangxianAsync(){
				this.$store.dispatch("setResturantNameAsync",{
					resturantName:"穿越火线"
				})
			}
		},
		computed:{
			msg(){
				// return "KFC";
				// return this.$store.state.resturantName;
				return this.$store.getters.getResturantName;
			}
		}
	}
</script>

<style>
</style>

3.页面展示

先点最终老板再点盘它，过6秒后，结果或变成最终老板的结果（同步结果跟着异步结果走，最后会出现异步的结果）

①、点击上线

②、点击头号玩家

后台调用问题

1、Mutations.js写与后台服务器做数据交互

export default{
	setResturantName:(state,payload)=>{
		state.resturantName=payload.resturantName;
	},
	doAjax:(state,payload)=>{
		//需求：想在当前文件中与后台服务器做数据交互
		//问题：获取不到根实例
		let _this=payload._this;
		let url = _this.axios.urls.SYSTEM_MENU_TREE;
		_this.axios.post(url, {}).then((resp) => {
			console.log(resp);
		}).catch(function(error) {
			console.log(error);
		});
	}
}

2、VuexPage1.vue

<template>
   <div>
       <h3>页面1:欢迎来到{{msg}}</h3>
       <button @click="shangxian">上线</button>
       <button @click="shangxianAsync">头号玩家</button>
       <button @click="doAjax">vuex与后台交互</button>
   </div>
</template>

<script>
   export default{
       name:'',
       data(){
           return {

           }
       },
       methods:{
           shangxian(){
               this.$store.commit("setResturantName",{
                   resturantName:"和平精英"
               })
           },
           doAjax(){
               this.$store.commit("doAjax",{
                   _this:this
               })
           },
           shangxianAsync(){
               this.$store.dispatch("setResturantNameAsync",{
                   resturantName:"穿越火线"
               })
           }
       },
       computed:{
           msg(){
               // return "KFC";
               // return this.$store.state.resturantName;
               return this.$store.getters.getResturantName;
           }
       }
   }
</script>

<style>
</style>

3、页面展示

能获取数据

bye~