前言
1.概念
Vuex是一个用于管理Vue.js应用程序中状态的状态管理模式和库。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Vuex则专门用于管理应用程序的状态，以确保状态在整个应用程序中保持一致和可维护。
2.Vuex的特点：
-
状态（State）: 在Vuex中，状态是一个存储数据的对象，代表了应用程序中的某些信息或数据。这个状态是响应式的，意味着当状态发生变化时，相关组件会自动更新以反映这些变化。
-
存储（Store）: Vuex引入了存储的概念，它是一个包含应用程序状态的单一对象。这个对象包含了你的应用程序中的所有全局状态，可以在整个应用程序中共享和访问。
-
Getter: Getter是一种用于从状态中派生数据的计算属性。它们可以用于在组件中获取状态的部分数据，然后对其进行进一步处理。
-
Mutation: Mutation是一种用于修改状态的方法，但是它们必须是同步的。这意味着它们用于执行状态的变更，但不能包含异步操作。Mutation用于记录状态变更，以便可以追踪和调试应用程序的状态变化。
-
Action: Action类似于Mutation，但它可以包含异步操作。Actions用于提交Mutation，以便在异步操作完成后修改状态。这使得处理异步操作（例如HTTP请求）更加灵活和可维护。
-
模块化（Modules）: Vuex允许你将应用程序的状态分割成模块。每个模块都有自己的状态、mutations、actions和getters，这有助于将大型应用程序的状态管理分解成更小的可管理部分。
使用Vuex的主要目标是确保应用程序中的状态管理变得可预测、可维护和易于理解。通过将状态集中存储在一个单一的Store中，你可以更轻松地追踪状态的变化、调试问题，并确保多个组件之间的状态同步。
要使用Vuex，你需要在Vue.js应用程序中安装和配置它，然后在组件中通过Getter、Mutation和Action来访问和修改状态。这有助于构建更具组织性和可维护性的Vue.js应用程序。
3.图解
一.Vuex的取值与改变值
1.Vuex的使用
1.1安装
最新版本node.js： npm install vuex -S
指定版本安装 ：npm i -S vuex@3.6.2
1.2 模拟Vuex管理编写基本页面
HTML
<el-submenu index="idx_258" key="key_258">
<template slot="title">
<span>vuex管理</span>
</template>
<el-menu-item index="/vuex/page1" key="key_258001">
<span>页面1</span>
</el-menu-item>
<el-menu-item index="/vuex/page2" key="key_258002">
<span>页面2</span>
</el-menu-item>
</el-submenu>JS
<template>
<div>
<h1>第二个页面</h1>
{{msg}}
</div>
</template>
<script>
export default{
data(){
return {
msg:'默认值'
}
}
}
</script><template>
<div>
<h1>第一个页面</h1>
{{msg}}
</div>
</template>
<script>
export default{
data(){
return {
msg:'默认值'
}
}
}
</script>1.3 新建store仓库实例
分别在store仓库目录下创建actions.js、getters.js、mutations.js、state.js、index.js文件
（1）在store/state.js中定义状态数据
export default {
TName:'YU'
}
（2）在store/mutations.js中设置修改状态的同步函数
export default{
setTName:(state,payload){
state.TName = payload.TName
}
}state指的就是state.js文件导出的对象，payload指的是vue文件中传递过来的参数
（3）通过store/getters.js进行存值
export default{
getTname:(state){
return state.TName;
}
}
（4）在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块
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中进行配置,并在实例中挂载store仓库
import store from './store'
2.取值与改变值
通过方法模拟获取值与改变值
<div>
<h1>第一个页面</h1>
<p>改变state中的值</p>
请输入改变后的值<input v-model="msg" type="text"/>
<button @click="fun1">获取state值</button>
<button @click="fun2">改变state值</button>
</div>methods:{
fun1(){
let Tname = this.$store.state.TName;
alert(Tname)
},
fun2(){
this.$store.commit('setTName',{
TName:this.msg
})
}
}效果演示
3.跨页面取值
在page2中export default中定义计算属性对象获取值
computed:{
TName(){
return this.$store.state.TName
}
}效果演示
二.异步请求
1.定义异步方法
export default{
setTNameAsync:(context,payload)=>{
setTimeout(function(){
context.commit('setTName',payload);
},5000)
}
}
context指的是vuex的上下文
通过定时器的方式展示异步请求的方法，并在提交异步请求时调用同步请求的方法
2.定义函数调用异步方法
fun3(){
this.$store.dispatch('setTNameAsync',{
TName:this.msg
})
}效果展示
三.异步发送Ajax请求
1.定义发送Ajax后台请求方法
setTNameAjax:(context,payload)=>{
this.axios.post(url,{params:params}).then(r=>{
let _this = payload._this;
let url = this.axios.urls.VUEX_AJAX;
let param = {
resturantName:payload.TName
}
}).catch(e=>{
})
}2.定义后台方法
@RequestMapping("/queryVuex")
public JsonResponseBody<?> queryVuex(HttpServletRequest request) {
String resturantName = request.getParameter("resturantName");
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String date = sdf.format(new Date());
try {
System.out.println("模拟异步情况，睡眠6秒，不能超过10秒，axios超时时间设置的是10秒！");
Thread.sleep(6000);
System.out.println("睡醒了，继续...");
} catch (Exception e) {
e.printStackTrace();
}
return new JsonResponseBody<>(resturantName + "-" + date,true,0,null);
}3.配置路由
'VUEX_AJAX':'vuex/queryVuex',//vuex的后台异步请求4.前台函数调用
fun4(){
this.$store.dispatch('setTNameAjax',{
TName:this.msg,
_this:this
})
}注：这里需要将this进行传递到AJAX方法中进行调用
效果展示：
今天的分享到这里就结束了，感谢各位大大的观看，各位大大的三连是博主更新的动力，感谢谢谢谢谢谢谢谢谢各位的支持！！！！！
