做网络课程的网站教育机构做网站的目的

做网络课程的网站,教育机构做网站的目的,国内ui做的好的网站有哪些,阳朔到桂林北在 Vue 项目开发中#xff0c;当组件间需要共享状态、跨层级通信时#xff0c;单纯依靠props和emit会让代码变得杂乱且难以维护。Vuex 作为 Vue 官方的状态管理库#xff0c;通过集中式存储管理应用的所有组件的状态#xff0c;并以相应的规则保证状态以一种可预测的方式发…在 Vue 项目开发中当组件间需要共享状态、跨层级通信时单纯依靠props和emit会让代码变得杂乱且难以维护。Vuex 作为 Vue 官方的状态管理库通过集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。本文将从 Vuex 的四大核心概念State、Mutation、Action、Getter入手层层拆解其设计理念、使用方式和最佳实践帮你彻底搞懂 Vuex 的核心逻辑。一、Vuex 核心架构先理清整体逻辑在拆解具体概念前先明确 Vuex 的核心设计原则单向数据流。Vuex 的状态流转遵循View视图→ Action动作→ Mutation变更→ State状态→ View视图。View 触发 Action可包含异步操作Action 提交 Mutation不能异步Mutation 修改 StateState 更新后驱动 View 重新渲染。这种设计让状态变更轨迹清晰可追溯避免了直接修改状态导致的不可预测问题。二、State唯一的状态数据源1. 核心作用State 是 Vuex 的 “数据仓库”存储应用的所有共享状态且唯一一个 Vuex 实例只能有一个 State。它相当于组件中的data但作用域是全局的所有组件都能访问。2. 基本使用1定义 State// store/index.js import Vue from vue import Vuex from vuex Vue.use(Vuex) export default new Vuex.Store({ // 定义共享状态 state: { count: 0, userInfo: { name: 张三, age: 25 }, todos: [ { id: 1, text: 学习Vuex, done: true }, { id: 2, text: 拆解核心概念, done: false } ] } })2组件中访问 State有两种常用方式方式 1直接通过$store访问template div p当前计数{{ $store.state.count }}/p p用户名{{ $store.state.userInfo.name }}/p /div /template方式 2通过mapState辅助函数映射推荐简化代码适用于需要访问多个 State 的场景将 State 映射为组件的计算属性template div p当前计数{{ count }}/p p用户名{{ userName }}/p p待办列表{{ todos }}/p /div /template script import { mapState } from vuex export default { computed: { // 方式1数组形式映射的计算属性名与State属性名一致 ...mapState([count, todos]), // 方式2对象形式自定义计算属性名 ...mapState({ userName: state state.userInfo.name, // 简化写法当函数体仅返回state属性时 userAge: userInfo.age }) } } /script3. 注意事项State 是响应式的修改 State 后依赖该状态的组件会自动更新不要直接修改 State必须通过 Mutation这是 Vuex 的核心规则保证状态变更可追踪。三、Mutation唯一能修改 State 的 “钥匙”1. 核心作用Mutation 是修改 Vuex 中 State 的唯一方式所有对 State 的同步修改都必须通过 Mutation 完成。每个 Mutation 都有一个字符串类型的type和一个handler实际修改状态的函数。2. 基本使用1定义 Mutation// store/index.js export default new Vuex.Store({ state: { count: 0 }, mutations: { // 定义修改count的mutation increment(state) { state.count }, // 带参数的mutation参数称为payload incrementByNum(state, num) { state.count num }, // payload为对象的情况推荐可传递多个参数 incrementWithObj(state, payload) { state.count payload.num state.userInfo.age payload.age } } })2提交 Mutation组件中通过commit提交 Mutation不能直接调用 mutation 函数template div p当前计数{{ count }}/p button clickadd加1/button button clickaddByNum加5/button button clickaddWithObj加3且年龄加1/button /div /template script import { mapState } from vuex export default { computed: { ...mapState([count]) }, methods: { add() { // 方式1直接提交type this.$store.commit(increment) }, addByNum() { // 方式2提交带payload的mutation this.$store.commit(incrementByNum, 5) }, addWithObj() { // 方式3以对象形式提交更清晰 this.$store.commit({ type: incrementWithObj, num: 3, age: 1 }) } } } /script3mapMutations辅助函数简化 mutation 提交将 mutation 映射为组件的 methodsscript import { mapState, mapMutations } from vuex export default { computed: { ...mapState([count]) }, methods: { // 映射mutation为方法 ...mapMutations([increment, incrementByNum]), // 自定义方法名 ...mapMutations({ add: increment, addNum: incrementByNum }), addWithObj() { this.$store.commit({ type: incrementWithObj, num: 3, age: 1 }) } } } /script3. 核心规则必须是同步函数如果在 mutation 中写异步代码如 setTimeoutVuex 无法追踪状态变更的准确时机调试工具也无法正确记录状态变化仅负责修改状态不要在 mutation 中做业务逻辑如请求数据、判断逻辑业务逻辑应放在 Action 中。四、Action处理异步的 “中间件”1. 核心作用Action 用于处理异步操作和复杂业务逻辑最终通过提交 Mutation 来修改 State不能直接修改 State。Action 支持异步操作如 AJAX 请求、定时器这是它与 Mutation 的核心区别。2. 基本使用1定义 Action// store/index.js export default new Vuex.Store({ state: { count: 0, userList: [] }, mutations: { increment(state) { state.count }, setUserList(state, list) { state.userList list } }, actions: { // 简单异步action带context参数包含store的所有方法/属性 incrementAsync(context) { setTimeout(() { // 提交mutation修改状态 context.commit(increment) }, 1000) }, // 解构context简化代码常用 incrementAsyncWithNum({ commit }, num) { setTimeout(() { commit(incrementByNum, num) }, 1000) }, // 异步请求数据的action async fetchUserList({ commit }) { try { const res await fetch(/api/userList) const data await res.json() commit(setUserList, data) } catch (err) { console.error(请求失败, err) } } } })2分发 Action组件中通过dispatch分发 Actiontemplate div p当前计数{{ count }}/p button clickaddAsync1秒后加1/button button clickaddAsyncByNum1秒后加5/button button clickgetUserList获取用户列表/button /div /template script import { mapState } from vuex export default { computed: { ...mapState([count, userList]) }, methods: { addAsync() { this.$store.dispatch(incrementAsync) }, addAsyncByNum() { // 分发带payload的action this.$store.dispatch(incrementAsyncWithNum, 5) }, getUserList() { this.$store.dispatch(fetchUserList) } } } /script3mapActions辅助函数将 Action 映射为组件的 methods简化分发操作script import { mapState, mapActions } from vuex export default { computed: { ...mapState([count, userList]) }, methods: { ...mapActions([incrementAsync, fetchUserList]), // 自定义方法名 ...mapActions({ addAsyncNum: incrementAsyncWithNum }), handleAdd() { this.addAsyncNum(5) } } } /script3. 核心特性支持异步可在 Action 中执行任意异步操作请求、定时器等可组合Action 之间可以互相调用处理复杂业务逻辑actions: { actionA({ dispatch }) { return new Promise(resolve { setTimeout(() { dispatch(actionB) resolve() }, 1000) }) }, actionB({ commit }) { commit(increment) } }五、Getter对 State 的 “计算属性”1. 核心作用Getter 相当于 Vuex 的 “计算属性”用于对 State 中的数据进行加工处理如过滤、排序、拼接返回新的结果。Getter 的返回值会根据其依赖的 State 自动缓存只有当依赖的 State 变化时才会重新计算。2. 基本使用1定义 Getter// store/index.js export default new Vuex.Store({ state: { todos: [ { id: 1, text: 学习Vuex, done: true }, { id: 2, text: 拆解核心概念, done: false }, { id: 3, text: 实战练习, done: false } ], count: 0 }, getters: { // 基础用法获取已完成的待办 doneTodos: state { return state.todos.filter(todo todo.done) }, // 获取已完成待办的数量依赖其他getter doneTodosCount: (state, getters) { return getters.doneTodos.length }, // 带参数的getter返回函数实现传参 getTodoById: state id { return state.todos.find(todo todo.id id) }, // 组合计算 doubleCount: state { return state.count * 2 } } })2访问 Getter方式 1通过$store.getters访问template div p已完成待办{{ $store.getters.doneTodos.length }} 条/p pID为1的待办{{ $store.getters.getTodoById(1).text }}/p p计数翻倍{{ $store.getters.doubleCount }}/p /div /template方式 2mapGetters辅助函数将 Getter 映射为组件的计算属性template div p已完成待办{{ doneTodosCount }} 条/p p计数翻倍{{ doubleCount }}/p /div /template script import { mapGetters } from vuex export default { computed: { // 数组形式映射 ...mapGetters([doneTodosCount, doubleCount]), // 自定义名称映射 ...mapGetters({ doneCount: doneTodosCount, double: doubleCount }), // 结合本地计算属性 todoText() { return this.$store.getters.getTodoById(2).text } } } /script3. 核心优势缓存性依赖不变时多次访问 Getter 不会重复计算复用性将通用的状态处理逻辑抽离到 Getter避免组件中重复写相同代码纯函数Getter 仅依赖 State 和其他 Getter不产生副作用保证结果可预测。六、核心概念对比与总结概念核心作用是否可异步是否能直接修改 State调用方式State存储共享状态--组件中通过$store.state访问Mutation同步修改 State否是唯一方式$store.commit(type)Action处理异步 / 业务逻辑提交 Mutation是否$store.dispatch(type)Getter加工 State 数据计算属性-否$store.getters.xxx最佳实践遵循单向数据流View → Action → Mutation → State → View简单同步修改直接提交 Mutation异步 / 复杂逻辑先写 Action再在 Action 中提交 Mutation状态加工使用 Getter 抽离通用逻辑避免组件重复代码辅助函数mapState/mapMutations/mapActions/mapGetters简化代码提升可读性模块化当项目复杂时使用 Vuex 的 Module 拆分状态后续可单独拆解。七、最后Vuex 的四大核心概念围绕 “可预测的状态管理” 设计理解它们的分工和协作逻辑就能轻松应对组件间的状态共享问题。记住State 存数据Mutation 改数据同步Action 处理异步 / 业务Getter 加工数据。从简单场景入手逐步尝试异步 Action、Getter 缓存、辅助函数等特性你会发现 Vuex 能让复杂应用的状态管理变得清晰、可控。