秀屿网站建设,做微商截图的网站,阿里云网站安装,手机网站会员中心模板前言 在之前的文章中#xff0c;我们已经对 Vue.js 有了一定的了解。今天我们要对Vue官方的状态共享管理器Vuex进行详细讲解#xff0c;将其基本吃透#xff0c;目标是面对大多数业务需求#xff1b; 一、介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用…
前言 在之前的文章中我们已经对 Vue.js 有了一定的了解。今天我们要对Vue官方的状态共享管理器Vuex进行详细讲解将其基本吃透目标是面对大多数业务需求 一、介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 随着 Vue 一同开发并且是 Vue.js 官方维护的状态管理库。
在 Vue.js 应用程序中组件之间的通信是通过 props 和事件来实现的这种方式在组件层级较浅()的情况下可以很好地管理状态但是随着应用规模的增长状态的管理会变得复杂和困难。这时候就需要使用 Vuex 来解决状态管理的问题。
Vuex 中包含以下核心概念
State状态 即存储在 Vuex 中的数据它代表了整个应用的状态。Getter获取器 用于从状态树state中派生出一些状态类似于计算属性Mutation变更 是唯一允许修改 Vuex 中状态的地方但是必须是同步函数。Action动作 用于提交 mutation而不是直接变更状态。可以包含任意异步操作。
二、Vuex的适用范围
Vuex 适用于中大型的 Vue.js 应用程序特别是当应用的状态变得复杂且需要在多个组件之间共享时。它提供了一种集中式管理状态的方式使得状态管理变得更加可预测和可维护。 Vuex既适用于Vue2也适用于Vue3;
当应用中包含以下情况时考虑使用 Vuex
多个组件需要共享同一状态。多个视图依赖于同一状态。有大量的组件需要访问和修改状态。
当应用程序的状态变得较简单或者组件之间的状态传递并不频繁时可能并不需要使用 Vuex。在这种情况下可以考虑使用 Vue.js 的局部状态data来管理组件的状态。
三、Vuex的主要组成部分
Vuex 的核心包含四个主要部分State、Getters、Mutations 和 Actions。
1.State
State 是 Vuex 存储数据的地方它类似于组件中的 data。State 中的数据可以通过 this.$store.state 访问。
①在根Vuex中定义state
state: {message: Hello, Vuex!, // 字符串类型变量count: 0, // 数字类型变量isActive: false, // 布尔类型变量user: { // 对象类型变量name: John Doe,age: 30},items: [apple, banana, orange], // 数组类型变量currentDate: new Date() // 引用类型变量}②在 Vuex 中定义模块的 state
// Module A
const moduleA {state: {message: Hello from Module A,count: 0}
};// Module B
const moduleB {state: {message: Hello from Module B,isActive: true}
};// Vuex Store
const store new Vuex.Store({modules: {moduleA,moduleB}
});在这个示例中我们定义了两个模块 moduleA 和 moduleB每个模块都有自己的 state 对象包含了不同的状态属性。 以下是两种在组件中使用 Vuex state 的案例
①根Vuex直接访问 $store.state
templatedivpMessage: {{ $store.state.message }}/ppCount: {{ $store.state.count }}/ppActive: {{ $store.state.isActive }}/ppUser: {{ $store.state.user.name }} ({{ $store.state.user.age }})/ppItems: {{ $store.state.items }}/ppCurrent Date: {{ $store.state.currentDate }}/p/div
/template特点
直接访问 $store.state 可以在模板中直接使用 Vuex store 中的 state语法简单直接。在模板中使用 $store.state 可能会导致代码冗长难以维护尤其是在大型应用中。
② 根Vuex使用 mapState 辅助函数
templatedivpMessage: {{ message }}/ppCount: {{ count }}/ppActive: {{ isActive }}/ppUser: {{ user.name }} ({{ user.age }})/ppItems: {{ items }}/ppCurrent Date: {{ currentDate }}/p/div
/templatescript
import { mapState } from vuex;export default {computed: {...mapState([message,count,isActive,user,items,currentDate]) // 传入数组}
};
/script特点
使用 mapState 可以将 Vuex store 中的 state 映射到组件的计算属性中使得在模板中可以直接使用这些计算属性映射在计算属性中才能保证实时响应。使用 mapState 可以简化模板中对 Vuex state 的访问提高代码的可读性和可维护性。mapState 需要传入一个数组或对象作为参数这个参数包含了需要映射的 state 属性这样可以灵活地选择需要的属性映射到组件中。
③直接访问模块 $store.state
templatedivpMessage from Module A: {{ $store.state.moduleA.message }}/ppCount from Module A: {{ $store.state.moduleA.count }}/ppMessage from Module B: {{ $store.state.moduleB.message }}/ppisActive from Module B: {{ $store.state.moduleB.isActive }}/p/div
/template④模块state使用 mapState 辅助函数
templatedivpMessage from Module A: {{ moduleA_message }}/ppCount from Module A: {{ moduleA_count }}/ppMessage from Module B: {{ moduleB_message }}/ppisActive from Module B: {{ moduleB_isActive }}/p/div
/templatescript
import { mapState } from vuex;export default {computed: {...mapState(moduleA, [ // 模块名message as moduleA_message, // 使用别名来避免与全局变量冲突count as moduleA_count // count是原名moduleA_count是别名]),...mapState(moduleB, [message as moduleB_message,isActive as moduleB_isActive])}
};
/script⑤用mapState函数的对象形式映射模块状态
在模板中你可以直接使用这两个计算属性来获取模块 A 和模块 B 中的 message 状态。下面是模板中如何使用这两个计算属性的示例
templatedivpMessage from Module A: {{ moduleA_message }}/ppMessage from Module B: {{ moduleB_message }}/p/div
/templatescript
import { mapState } from vuex;export default {computed: {...mapState({// 使用命名空间来映射模块中的状态moduleA_message: state state.moduleA.message, // 模块A下的message对象别名为moduleA_messagemoduleB_message: state state.moduleB.message // moduleA_message可以用引号括住也可以不要引号})}
};
/script在这个案例中我们展示了五种使用 的 state 的方式。基于模块创建的state使用和基于根Vuex的state使用
2.Getter
①定义
Getter 允许我们在Vuex中派生状态它类似于组件中的 computed 属性。Getter 可以接收 state 作为参数然后返回派生出的状态。
const store new Vuex.Store({state: {todos: [{ id: 1, text: Todo 1, done: true },{ id: 2, text: Todo 2, done: false }]},getters: {doneTodos: state {return state.todos.filter(todo todo.done);}}
});在 Vuex 中Getter 可以用来对 store 中的 state 进行一些计算或筛选从而得到我们想要的状态而不需要直接修改原始的 state。这样做有几个好处
组件中的状态派生 Getter 可以用来将 store 中的状态进行处理然后在组件中直接使用这些派生出的状态而无需在组件中进行复杂的计算逻辑。避免直接修改 state 使用 Getter 可以避免直接修改 store 中的 state使得代码更加可维护和可测试同时也保证了 Vuex 的单向数据流。重用性和可组合性 可以将 Getter 进行组合和重用使得代码更加灵活和可扩展。
②组合性和复用性
在上面的示例中我们定义了一个名为 doneTodos 的 Getter它接收 store 中的 state 作为参数然后返回一个数组这个数组包含了所有已完成的 todo。在组件中可以直接使用 doneTodos 这个 Getter 来获取已完成的 todo而无需在组件中手动筛选 todo 数组。这样可以使得组件中的代码更加简洁和清晰。 对于第三点的复用性和组合性案例如下
const store new Vuex.Store({state: {todos: [{ id: 1, text: Todo 1, done: true },{ id: 2, text: Todo 2, done: false }]},getters: {doneTodos: state {return state.todos.filter(todo todo.done);},undoneTodos: state {return state.todos.filter(todo !todo.done);},totalTodosCount: state {return state.todos.length;},undoneTodosCount: (state, getters) {return getters.doneTodos.length; // undoneTodosCount Getter 使用了 doneTodos Getter 来获取所有已完成的任务}}
});③模块间的 Getter 访问
在 Vuex 中一个模块的 Getter 可以访问其他模块的 state 和 Getter以及根模块的 state 和 Getter。这是因为在 Getter 中可以通过参数访问当前模块的 state 和 Getter以及 rootState 和 rootGetters。同理Vuex根getters也可以访问其他模块的state和getters案例代码如下
const store new Vuex.Store({modules: {moduleA: {state: {message: Module A Message},getters: {moduleA_message: state state.message}},moduleB: {state: {message: Module B Message},getters: {moduleB_message: state state.message}},moduleC: {getters: {combinedMessages: (state, getters, rootState, rootGetters) {const moduleA_message rootGetters[moduleA/moduleA_message];const moduleB_message rootGetters[moduleB/moduleB_message];return ${moduleA_message} - ${moduleB_message};}}}}
});
const store new Vuex.Store({modules: {moduleA: {state: {message: Module A Message},getters: {moduleA_message: state state.message}}},getters: {moduleA_message: (state, rootGetters) {return rootGetters[moduleA/moduleA_message];}}
});从这个角度看rootGetters是一个对象其中每个键代表每个模块名称值为每个模块对于的getter 同理rootState.moduleName.stateName可以访问不同模块间的state属性
④缓存特性
Getter 在默认情况下是具有缓存特性的意味着在相同的状态下多次调用相同的 Getter只会计算一次并且在下次调用时直接返回缓存的结果而不会重新计算。这可以提高性能避免重复计算。
在 Vuex 中Getter 是一个函数可以接收 state、getters 和 rootState 作为参数。这使得 Getter 具有更大的灵活性 由于 Getter 是函数因此可以在其中进行条件判断和计算根据不同的情况返回不同的值从而实现更灵活的状态派生和计算逻辑
3. Mutations
①定义
Mutations 是 Vuex 中用来唯一能修改状态的函数类似于组件中的 methods。Mutation 函数接收当前状态 (state) 作为第一个参数并且可以接收额外的参数作为需要修改的数据。Mutation 必须是同步函数不能包含异步操作。
const store new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count;},decrement(state) {state.count--;},incrementBy(state, payload) {state.count payload.amount;}}
});Mutations 是同步的Mutations 中的操作是同步执行的不支持异步操作。只能通过 Mutations 修改状态在 Vuex 中强制规定只能通过 Mutations 来修改状态这样可以更好地追踪状态的变化并且使得状态变更更加可控。
②在组件中使用
methods: {increment() {this.$store.commit(increment);},decrement() {this.$store.commit(decrement);},incrementBy(amount) {this.$store.commit(incrementBy, { amount }); // this指的是Vue实例,第二个参数等于{ amount: amount }}
}③应用场景
修改单个状态当需要修改 Vuex 中的某个单个状态时可以使用 Mutation。批量修改状态可以一次性修改多个状态保持状态变更的原子性。追踪状态变化通过 Mutation可以清晰地追踪状态的变化便于调试和排查问题。 下面是应用场景2的一个案例:
const store new Vuex.Store({state: {count: 0,message: Hello, Vuex!},mutations: {updateState(state, payload) {// payload 是一个包含多个状态的对象Object.assign(state, payload);}},actions: {updateState(context, payload) {context.commit(updateState, payload);}}
});// 在组件中调用这个 Mutation 来批量修改状态
this.$store.commit(updateState, { // 如果是模块则this.$store.commit(moduleName/mutationName, payload)count: 10,message: Hello, Vuex! Updated!
});Object.assign(state, payload);是浅拷贝方法因此组件中这样使用可能会导致整个模块或者全局都改变 4. Actions
①定义
Action 类似于 Mutation但具有异步操作的能力它提交的是 Mutation而不是直接变更状态。其通过 store.dispatch 触发Mutations 来变更状态。 Actions 接收一个上下文对象 (context)这个context是包含了与 Vuex 实例具有相同方法和属性的对象例如 state、commit、dispatch 等
const store new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count;}},actions: {incrementAsync(context) {setTimeout(() {context.commit(increment); // 变量名为对应mutation名称}, 1000);}}
});在 Vuex 中每个模块module内部都有一个上下文对象 (context)它提供了与 根store 实例具有相同方法和属性的对象包括 state(属性)、commit(方法提交mutation)、dispatch(方法分发action触发异步) 等。这样设计的目的是为了让模块内部的 actions、mutations、getters 等能够访问和操作模块的局部状态而不需要通过全局的 store 对象。 ②组件中使用
Actions 可以通过 store.dispatch 方法在组件中触发。在 Action 中可以执行异步操作例如发起 HTTP 请求、定时器等然后在异步操作完成后提交 Mutations 来变更状态
// 组件中触发 Action
methods: {incrementAsync() {this.$store.dispatch(incrementAsync);}
}③特点
异步操作Actions 可以执行任意异步操作例如 HTTP 请求、定时器等。提交 MutationsActions 通过 context.commit 来提交 Mutations从而变更状态。触发方式Actions 可以通过 store.dispatch 方法在组件中触发。
④应用场景
处理异步逻辑例如发起 HTTP 请求获取数据后提交 Mutations 更新状态。封装复杂逻辑将复杂的业务逻辑封装在 Action 中使组件更加简洁。异步操作Actions 可以执行异步操作但应该避免在 Action 中进行直接的状态变更。触发方式Actions 必须通过 store.dispatch 方法来触发。保证顺序执行和稳定
⑤WebGIS中的应用场景
异步数据获取 在 WebGIS 应用中通常需要从服务器获取地理空间数据、地图瓦片、地图图层配置等信息。Actions 可以用于发起异步请求并在数据获取完成后更新 Vuex 中的状态以便在地图中显示数据。用户交互和事件处理 用户在地图上的操作通常会触发一系列的事件例如点击地图、拖动地图、放大缩小地图等。Actions 可以用于监听这些事件并根据用户的操作进行相应的状态更新或地图操作。状态管理 WebGIS 应用中通常包含复杂的地图状态例如地图的视图范围、图层的可见性、图层样式等。Actions 可以用于管理这些状态并在需要时进行状态的更新和同步。地图操作和交互效果 Actions 可以用于执行地图操作例如平移地图、缩放地图、绘制图形等并根据操作结果更新地图的状态和展示效果。应用配置和设置 Actions 可以用于处理应用的配置信息和用户设置例如地图的初始配置、图层的加载顺序、应用的主题设置等。
四、Vuex的常用函数
1.mapState
mapState 函数用于将 Vuex 中的 state 映射为组件的计算属性。它接收一个数组或对象作为参数数组中可以是 state 中的属性名也可以是对象形式对象的键是组件中的属性名值是 state 中的属性名或者是一个返回状态的函数。这样在组件中就可以直接使用这些计算属性无需再通过 $store.state.xxx 的方式访问 Vuex 中的状态。
import { mapState } from vuex;export default {computed: {// 使用数组...mapState([count, message]),// 使用对象...mapState({user: state state.userInfo,isLoggedIn: state state.auth.isLoggedIn})}
};2.mapGetters
mapGetters 函数用于将 Vuex 中的 getters 映射为组件的计算属性。它接收一个数组或对象作为参数用法与 mapState 相似可以使用数组形式或者对象形式来进行映射。
import { mapGetters } from vuex;export default {computed: {...mapGetters([doneTodosCount, undoneTodosCount]),...mapGetters({formattedMessage: formattedMessage})}
};3.mapMutations
mapMutations 函数用于将 Vuex 中的 mutations 映射为组件的方法。它接收一个数组或对象作为参数数组中是 mutations 中的方法名对象形式的键是组件中的方法名值是 mutations 中的方法名。
import { mapMutations } from vuex;export default {methods: {...mapMutations([increment, decrement]),...mapMutations({setUserName: SET_USER_NAME})}
};数组方法直接用对象方法可以改别名后使用 ...mapMutations([increment, decrement]) 等价于以下代码
{increment: function() {return this.$store.commit(increment);},decrement: function() {return this.$store.commit(decrement);}
}它将 mapMutations 返回的对象展开将其中的每个方法映射到组件中使得用户可以直接调用 this.increment() 和 this.decrement() 来提交对应的 mutations。
4.mapActions
mapActions 函数用于将 Vuex 中的 actions 映射为组件的方法。用法与 mapMutations 类似接收一个数组或对象作为参数数组中是 actions 中的方法名对象形式的键是组件中的方法名值是 actions 中的方法名。
import { mapActions } from vuex;export default {methods: {...mapActions([login, logout]),...mapActions({fetchUserData: FETCH_USER_DATA})}
};通常情况下mutation 用于同步地修改状态而 actions 则用于包含异步操作的场景。在 actions 中可以调用多个 mutation 来修改状态但通常不会在 actions 中定义不需要通过 mutation 修改状态的独立方法。这样可以保持状态变更的可追踪性和可维护性。
当在 actions 中执行异步操作时可能需要在异步操作完成后修改多个状态。例如假设有一个购物车功能需要在用户点击结账按钮时执行以下操作
清空购物车中的商品列表。将商品列表中的商品添加到订单列表中。将订单总金额清零。
在这种情况下可以在 actions 中调用多个 mutation 来修改这些状态。以下是示例代码
const store new Vuex.Store({state: {cart: [{ id: 1, name: Product 1, price: 10 },{ id: 2, name: Product 2, price: 20 },// 其他商品],orders: [],},getters: {totalAmount: state {return state.cart.reduce((total, product) total product.price, 0); // 累加p1为累加器p2为当前元素0为初始值}},mutations: {clearCart(state) {state.cart [];},addToOrders(state, products) {state.orders.push(...products);},resetTotalAmount(state) {state.totalAmount 0;}},actions: {checkout({ commit, state }) {// 模拟异步操作例如向后端发送订单请求setTimeout(() {// 异步操作完成后调用多个 mutation 来修改状态commit(addToOrders, state.cart); // 添加到订单commit(clearCart); // 清空购物车commit(resetTotalAmount); //清空总额}, 1000);}}
});在上面的示例中checkout action 执行了一系列异步操作然后调用了多个 mutation 来修改状态。 五、Vuex的应用场景
1.管理购物车状态:
应用场景在线商城中用户可以将商品加入购物车修改商品数量或移除商品。实现方式使用 Vuex 来管理购物车的状态包括购物车中的商品列表、商品数量、总价等信息。通过 mutations 修改购物车状态例如增加商品、删除商品、修改商品数量等操作。
2.用户认证状态管理:
应用场景网站或应用中需要对用户进行认证登录后可以访问特定的页面或功能未登录状态下需要跳转到登录页面。实现方式使用 Vuex 存储用户的认证状态例如用户信息、登录状态、权限等信息。通过 mutations 修改用户认证状态例如登录、注销、更新用户信息等操作。在需要认证的页面或功能中通过 getters 获取用户的认证状态来控制页面展示逻辑。
3.表单数据管理:
应用场景页面中存在复杂的表单包含多个输入框、复选框、下拉框等元素需要实时根据用户输入更新表单数据。实现方式使用 Vuex 存储表单的状态例如表单数据、验证状态、提交状态等信息。通过 mutations 修改表单数据状态例如更新输入框值、切换复选框状态等操作。通过 getters 获取表单数据状态实时展示给用户同时通过 actions 处理表单提交逻辑例如表单验证、数据提交等操作。
4.页面之间共享的数据状态:
应用场景不同页面或组件之间需要共享相同的数据状态例如全局的主题设置、语言设置等。实现方式使用 Vuex 存储全局的数据状态例如主题颜色、语言设置等信息。通过 mutations 修改全局数据状态例如切换主题、切换语言等操作。通过 getters 获取全局数据状态实时应用到页面或组件中。
5.WebGIS中的应用场景
在 WebGIS 中Vuex 可以应用于许多场景以管理地图状态、图层数据、用户交互等。以下是一些常见的 WebGIS 应用场景
1.地图状态管理
应用场景在 WebGIS 应用中用户可能会对地图进行缩放、平移、旋转等操作这些操作会导致地图状态的变化如当前的中心点、缩放级别、旋转角度等。实现方式使用 Vuex 存储地图的状态信息例如中心点坐标、缩放级别、旋转角度等。通过 mutations 修改地图状态例如更新中心点坐标、修改缩放级别等操作。通过 getters 获取地图状态信息以便在地图组件中实时展示。
2.图层数据管理
应用场景WebGIS 应用中通常包含多个图层如矢量图层、栅格图层、图像图层等这些图层可能需要根据用户的操作进行显示、隐藏、更新等操作。实现方式使用 Vuex 存储图层的状态信息例如图层的可见性、透明度、样式等。通过 mutations 修改图层状态例如显示/隐藏图层、更新图层样式等操作。通过 getters 获取图层状态信息以便在地图组件中实时控制图层的显示。
3.用户交互管理
应用场景WebGIS 应用中用户可能会进行交互操作如点击地图、绘制要素、查询信息等这些操作需要及时响应并更新相关状态。实现方式使用 Vuex 存储用户交互的状态信息例如点击的位置、绘制的要素、查询到的信息等。通过 mutations 修改用户交互状态例如记录点击位置、绘制要素、查询结果等操作。通过 getters 获取用户交互状态信息以便在地图组件中实时展示用户的操作。
六、Vuex的最佳实践思路
针对一个中大型WebGIS项目可以采用以下方法论来设计和组织 Vuex 的解决方案
模块化设计 ○ 将 Vuex store 拆分成多个模块每个模块专注于处理特定的业务逻辑或状态管理。 ○ 根据业务领域的不同可以将模块划分为地图模块、用户模块、数据模块等每个模块管理对应领域的状态和逻辑。命名空间 ○ 在定义 Vuex 模块时可以使用命名空间来避免不同模块之间的命名冲突确保模块的状态和操作的唯一性和可识别性。 ○ 通过在模块定义时设置 namespaced: true 来启用命名空间。拆分状态 ○ 将 Vuex store 中的状态拆分成不同的模块级别的状态每个模块负责管理自己的状态。 ○ 例如地图模块可以管理地图状态中心点坐标、缩放级别等、图层状态等用户模块可以管理用户信息、权限状态等。常量管理 ○ 使用常量来表示 mutation 和 action 的名称以提高代码的可读性和维护性。 ○ 将常量集中管理可以在单独的文件中定义常量并在需要使用的地方引入避免重复定义和错误拼写。异步操作 ○ 对于需要进行异步操作的情况例如 API 请求、数据加载等使用异步 action 来处理。 ○ 在异步 action 中进行异步操作并在操作完成后提交 mutation 来更新状态保持 Vuex 单向数据流的规范。模块间通信 ○ 对于模块之间需要进行通信的情况可以通过根模块来协调不同模块之间的状态和操作。 ○ 使用根模块的 state 和 getters 来访问和管理不同模块的状态使用根模块的 mutations 和 actions 来触发和处理模块间的操作。代码组织 ○ 合理组织 Vuex 相关的代码结构例如将常量、mutations、actions、getters 等分别放置在不同的文件中便于管理和维护。 ○ 可以按照功能模块或业务领域来组织代码结构使代码清晰易读。
七、总结
在本文中我们全面地探讨了 Vuex这是一个专为 Vue.js 应用程序开发的状态管理模式。通过学习 Vuex 的基础概念、高级用法、辅助函数和应用场景我们深入理解了 Vuex 的工作原理和应用方法。
通Vuex 提供了一种统一的状态管理方案使得不同组件之间可以轻松共享状态并且保证状态的一致性。 在实际项目中我们可以利用 Vuex 来管理购物车状态、用户认证状态、表单数据状态等。通过合理地设计和使用 Vuex我们可以有效地管理复杂的状态逻辑并且提高项目的开发效率和质量。
文章参考 开始 | Vuex vuex的超详细讲解和具体使用细节记录篇幅略长建议收藏 - 知乎 Vuex的全面简约版总结_vuex参考文献-CSDN博客
项目地址
Github地址拓展阅读 如果觉得我的文章对您有帮助三连关注便是对我创作的最大鼓励或者一个star也可以.
