重庆优化网站排名,微信小程序怎么做问卷,作业网站建设方案,seo系统推广14天阅读挑战赛 学不可以已...
目录
一、Vuex简介
1.1 vuex介绍
1.2 vuex核心 二、Vuex使用
2.1 Vuex安装
2.2 创建store模块
2.3 创建vuex的store实例并注册上面引入的各大模块 三、使用Vuex获取、修改值案例
3.1 创建两个菜单组件
3.2 配置路由
3.3 模拟菜单数据
…14天阅读挑战赛 学不可以已...
目录
一、Vuex简介
1.1 vuex介绍
1.2 vuex核心 二、Vuex使用
2.1 Vuex安装
2.2 创建store模块
2.3 创建vuex的store实例并注册上面引入的各大模块 三、使用Vuex获取、修改值案例
3.1 创建两个菜单组件
3.2 配置路由
3.3 模拟菜单数据
3.4 vuex核心操作
3.5 界面获取、修改值实现 四、异步处理
4.1 异步改变值
4.2 异步发送Ajax到后端
Tips❕ 一、Vuex简介
1.1 vuex介绍 Vuex是专门为vue应用程序开发的状态管理模式将组件的共享状态抽取出来以一个全局单例模式进行管理组件树构成一个巨大的视图不管组件在树的何种位置任何组件都能获取到状态和触发行为。可以将其想象为一个“前端数据库”数据仓库让其在各个页面上实现数据的共享包括状态并且可操作。核心就是 解决组件间的通讯问题 1.2 vuex核心 State单一状态树存储应用程序的状态数据类似于组件中的data属性。但与组件的data不同Vuex的状态是响应式的当状态发生变化时所有依赖该状态的组件都会自动更新。 Getters状态获取用于从状态中派生出新的数据类似于Vue组件中的计算属性。Getters可以对状态进行一些计算或过滤并将结果暴露给组件使用。 Mutations变更用于修改状态的唯一途径。Mutations是同步的操作用于处理同步的状态变更。每个Mutation都有一个字符串类型的事件名称和一个回调函数通过提交commitMutation来触发状态的变更。 Actions动作提交mutation可以包含异步操作用于处理异步操作和复杂的业务逻辑。Actions可以包含任意异步操作例如发送网络请求或执行定时任务并通过提交Mutations来修改状态。Actions可以通过分发dispatch来触发。 Modules模块用于将大型的Vuex应用程序拆分为更小的模块每个模块都有自己的状态、获取器、变更和动作。这样可以更好地组织代码提高代码的可维护性和可扩展性。 使用Vuex可以带来以下好处 集中式的状态管理将应用程序的状态集中管理使得状态的变更更加可追踪和可维护。 组件之间的数据共享不同组件之间可以轻松地共享状态避免了通过props和事件传递数据的繁琐过程。 状态的可预测性通过明确的状态变更方式Mutations和Actions可以更好地追踪状态的变化提高代码的可读性和可维护性。 插件扩展Vuex提供了丰富的插件机制可以方便地扩展Vuex的功能例如添加日志记录、持久化存储等。 二、Vuex使用
2.1 Vuex安装
注意 运行环境
1、node.js版本10输入下指令进行安装
npm install vuex -S
2、node.js版本18请执行下指令
npm i -S vuex3.6.2 2.2 创建store模块
创建store目录及需要的文件 2.3 创建vuex的store实例并注册上面引入的各大模块
1、src/store/index.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 store2、src/main.js 通过在根实例中注册store选项该store实例会注入到根组件下的所有子组件中且子组件可以通过this.$store访问到。 三、使用Vuex获取、修改值案例
3.1 创建两个菜单组件
src/views/vuex 3.2 配置路由
src/router/index.js 3.3 模拟菜单数据 !-- 模拟数据 --el-submenu keykey_999 indexindex_999template slottitlespan slottitleVuex管理/span/templateel-menu-item keykey_99901 index/vuex/pageOnespanpageOne/span/el-menu-itemel-menu-item keykey_99902 index/vuex/pageTwospanpageTwo/span/el-menu-item/el-submenu 3.4 vuex核心操作
1、在state.js中定义全局参数
export default {Name: 云村小威
}2、在mutations.js中改变值
export default {/* 1.state指state.js文件导入的对象2.payload指vue文件传递过来的界面*/setName: (state, payload) {state.Name payload.Name}
}3、在getters.js中获取参数值
export default {getName: (state) {return state.Name;}
}这一些列操作相当于java分装实体类把它一一才拆分这样可以更好地组织代码提高代码的可维护性和可扩展性。 3.5 界面获取、修改值实现
1、pageOne.vue组件编写
templatedivh1PageOne/h1p请输入您要修改的值/pinput typetext v-modelmsgbutton clickchanged修改参数值/buttonbutton clickgetData获取参数值/button/div
/templatescriptexport default {data() {return {msg: 默认值}},methods:{changed(){this.$store.commit(setName,{Name:this.msg})},getData(){let name this.$store.getters.getName;alert(name);}}}
/scriptstyle
/style注意 setName是mutations.js导出的属性名getName是getters.js导出的属性名 效果展示 2、pageTwo.vue组件编写
templatedivh1PageTwo/h1{{change}}/div
/templatescriptexport default {data() {return {msg: 默认值}},computed:{change(){return this.$store.getters.getName;}}}
/scriptstyle
/style效果展示 四、异步处理
4.1 异步改变值
1、src/store/actions.js
export default {setNameSync: (context, payload) {//context指的是vuex的上下文setTimeout(function() {context.commit(setName, payload)}, 3500)}
};2、在pageOne.vue组件添加异步事件
button clickAsynchronization异步改变参数值/buttonAsynchronization() {this.$store.dispatch(setNameSync, {name: this.msg})} 效果演示 4.2 异步发送Ajax到后端
1、后端请求代码编写
package com.ycxw.ssm.controller;import com.zking.ssm.util.JsonResponseBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;RestController
RequestMapping(/vuex)
public class VuexController {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);}
}2、src/api/action.js 封装请求的地址 VUEX: /vuex/queryVuex
3、src/store/actions.js 异步发送ajax到后端 setNameAjax: (context, payload) {let _this payload._this;let url _this.axios.urls.VUEX;let params {resturantName: payload.Name};_this.axios.post(url, params).then(r {console.log(r)}).catch(r {//异常代码console.log(r);});}
4、在pageOne.vue组件添加Ajax异步事件
button clickAjax异步Ajax改变参数值/buttonAjax() {this.$store.dispatch(setNameAjax, {Name: this.msg,_this: this})} 十秒异步处理演示 Tips❕ Action类似于 mutation不同在于 1. Action提交的是mutation而不是直接变更状态 2. Action可以包含任意异步操作 3. Action的回调函数接收一个 context 上下文参数注意这个参数可不一般它与 store 实例有着相同的方法和属性 注1 VUEX 的 actions 中无法获取到 this 对象 如果要在actions 或者 mutations 中使用this对象可以在调用的时候把this对象传过去。
