一.Vuex简介
Vuex 是一个用于 Vue.js 应用程序的状态管理模式和库。它以集中式存储管理应用的所有组件的状态，并提供可预测的状态变化。Vuex 主要解决了多个组件之间共享状态和数据管理的问题。
Vuex 的核心概念包括：
- State（状态）: Vuex 使用单一状态树（Single State Tree）来存储应用程序的所有状态。State 是驱动应用的数据源，可以通过
this.$store.state来访问。- Mutation（变化）: Mutation 是修改状态的唯一途径，它定义了对状态的修改操作。每个 Mutation 都有一个字符串类型的事件类型和一个回调函数，在回调函数中实际地改变状态。可以通过提交（commit）一个 Mutation 来修改状态，通过
this.$store.commit进行提交。- Action（动作）: Action 类似于 Mutation，但是可以包含异步操作。Action 提交 Mutation 来间接地改变状态，可以用于处理异步操作、封装复杂逻辑、触发多个 Mutation 等。通过分发（dispatch）一个 Action 来触发它，通过
this.$store.dispatch进行分发。- Getter（获取器）: Getter 可以理解为计算属性，用于从状态中派生出新的状态。Getter 提供一个访问函数，可以根据应用程序的状态进行动态计算，类似于对 Store 数据的过滤、格式化等操作。
- Module（模块）: Module 允许将 Store 拆分成多个模块，每个模块都有自己的 state、mutation、action、getter。模块化可以使得状态管理更加灵活和可维护，尤其对于大型应用程序很有用。
使用 Vuex 可以使得数据的流动更加清晰和可追踪，方便在复杂的应用中进行状态管理。它能够解决跨组件共享状态的问题，并提供一套明确的规则来定义和修改状态的逻辑。在大型项目中，使用 Vuex 可以使得数据流的管理和调试更加容易和高效。
二.vuex的存值取值
首先使用npm i -S vuex@3.6.2在cmd窗口中下载插件
建立两个界面分别为：page1,page2
到项目中src的router的index.js文件中配置路径
在leftave中编写页面
建立一个目录在目录里面建立4个js文件
state定义变量
export default{ eduName:'遇人不淑', aname:'', bname:'' }
mutations改变变量
export default{ seteduName:(state,payload)=>{ state.eduName =payload.eduName } }
getters获取变量
export default{ geteduName:(state)=>{ return state.eduName; } }
包裹以上四个js文件index
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 目录
编写page1
<template> <div style="padding: 60px;"> <h1>第一个页面</h1> <p>改变state中的值</p> 请输入人名称：<input v-model="msg"/> <button @click="fun1">获取state</button> <button @click="fun2">改变state</button> </div> </template> <script> export default{ data() { return{ msg:'默认值' } }, methods:{ fun1(){ let eduName =this.$store.state.eduName; alert(eduName); }, fun2(){ this.$store.commit('seteduName',{ eduName:this.msg }) } } } </script> <style> </style>
编写page2
<template> <div> <h1>第二个页面</h1> {{eduName}} </div> </template> <script> export default{ data() { return{ msg:'默认值' } }, computed:{ eduName(){ // return this.$store.state.eduName; return this.$store.getters.geteduName; } } } </script> <style> </style>
测试结果
三.vuex异步请求
在page1中编写
<template> <div style="padding: 60px;"> <h1>第一个页面</h1> <p>改变state中的值</p> 请输入人名称：<input v-model="msg"/> <button @click="fun1">获取state</button> <button @click="fun2">改变state</button> <button @click="fun3">异步修改state</button> <button @click="fun4">请求后台</button> </div> </template> <script> export default{ data() { return{ msg:'默认值' } }, methods:{ fun1(){ let eduName =this.$store.state.eduName; alert(eduName); }, fun2(){ this.$store.commit('seteduName',{ eduName:this.msg }) }, fun3(){ this.$store.dispatch('seteduNameAsync',{ eduName:this.msg }) }, fun4(){ this.$store.dispatch('seteduNameAjax',{ eduName:this.msg, _this:this }) } } } </script> <style> </style>
在actions.js中编写代码
export default{ seteduNameAsync:(context,payload)=>{ setTimeout(function() { context.commit('seteduName',payload); },10000); }, seteduNameAjax:(context,payload)=>{ let _this=payload._this; let url = _this.axios.urls.VUEX_AJAX; let params ={ resturantName:payload.eduName } _this.axios.post(url,params).then(r=>{ console.log(r); }).catch(e=>{ }) } }
编写后台异步请求
测试结果
