成都建网站公司,智能手机应用开发,营销网站建设服务,深圳企业网站建设制作设计公司前言 1.概念
Vuex是一个用于管理Vue.js应用程序中状态的状态管理模式和库。Vue.js是一个流行的JavaScript框架#xff0c;用于构建用户界面#xff0c;而Vuex则专门用于管理应用程序的状态#xff0c;以确保状态在整个应用程序中保持一致和可维护。
2.Vuex的特点#xf…前言 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 vuex3.6.2 1.2 模拟Vuex管理编写基本页面
HTML el-submenu indexidx_258 keykey_258template slottitlespanvuex管理/span/templateel-menu-item index/vuex/page1 keykey_258001span页面1/span/el-menu-itemel-menu-item index/vuex/page2 keykey_258002span页面2/span/el-menu-item/el-submenu
JS
templatedivh1第二个页面/h1{{msg}}/div
/templatescriptexport default{data(){return {msg:默认值}}}
/script
templatedivh1第一个页面/h1{{msg}}/div
/templatescriptexport 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.取值与改变值
通过方法模拟获取值与改变值
divh1第一个页面/h1p改变state中的值/p请输入改变后的值input v-modelmsg typetext/button clickfun1获取state值/buttonbutton clickfun2改变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方法中进行调用
效果展示 今天的分享到这里就结束了感谢各位大大的观看各位大大的三连是博主更新的动力感谢谢谢谢谢谢谢谢谢各位的支持
