wordpress 建网站 vpn,哔哩哔哩网页版下载视频,营销型网站建设818gx,北京小程序制作卓越华网天下目录 往期列表本章涵盖知识点回顾Vuex 的基本概念什么是 Vuex#xff1f;为什么需要 Vuex#xff1f; Vuex 的核心概念stategettersmutationsactionsmodules Vuex 的安装和基本使用安装 Vuex创建 store在 Vue 应用中使用 store在组件中访问和修改状态 Vuex 的模块化模块化的好… 目录 往期列表本章涵盖知识点回顾Vuex 的基本概念什么是 Vuex为什么需要 Vuex Vuex 的核心概念stategettersmutationsactionsmodules Vuex 的安装和基本使用安装 Vuex创建 store在 Vue 应用中使用 store在组件中访问和修改状态 Vuex 的模块化模块化的好处创建模块 Vuex 的持久化持久化的好处实现持久化 Vuex 辅助函数mapStatemapGettersmapActionsmapMutations创建一个带有模块化和持久化的计数器应用 结语互动交流 往期列表
【vue教程】一. 环境搭建与代码规范配置【vue教程】二. Vue特性原理详解【vue教程】三. 组件复用和通信(7 种方式)【vue教程】四. Vue 计算属性和侦听器【vue教程】五. Vue 的路由管理 本章涵盖知识点
Vuex 的核心概念state、getters、mutations、actionsVuex 在大型应用中的作用Vuex 的安装和基本使用Vuex 的模块化和持久化
回顾
在第五站我们深入学习了 Vue Router理解了如何通过动态路由和嵌套路由来构建复杂的页面导航结构并探讨了路由守卫在权限管理中的应用。 正文开始 如果觉得文章对您有帮助请帮我三连订阅谢谢 Vuex 的基本概念
什么是 Vuex
借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。 状态自管理应用包含以下几个部分
状态驱动应用的数据源视图以声明方式将状态映射到视图操作响应在视图上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意 Vuex 在 Vue 组件中的流程图 为什么需要 Vuex
随着应用的复杂性增加我们需要一种更结构化的方式来管理状态Vuex 通过集中管理状态、严格的流程变更和日志记录使得状态管理变得简单、可预测和可维护。
Vuex 的核心概念
state
存储在 Vuex 中的状态可以被 Vue 组件读取。
getters
可以认为是 state 的计算属性允许组件以更复杂的方式读取 state。
mutations
更改 Vuex 中状态的唯一方法是提交 mutation它们是同步的事务。
actions
类似于 mutations但它们可以包含异步操作。
modules
当应用变得复杂时可以使用模块来将 store 分割成多个小的子 store。
Vuex 的安装和基本使用
安装 Vuex
首先需要安装 Vuex 库
npm install vuex --save创建 store
创建一个新的 Vuex store
import Vue from vue;
import Vuex from vuex;Vue.use(Vuex);const store new Vuex.Store({state: {count: 0,},getters: {doubleCount: (state) state.count * 2,},mutations: {increment: (state) state.count,},actions: {incrementAsync({ commit }) {setTimeout(() {commit(increment);}, 1000);},},
});在 Vue 应用中使用 store
在 main.js 中将 store 实例注入到 Vue 中
new Vue({store,render: (h) h(App),
}).$mount(#app);在组件中访问和修改状态
// 读取状态
computed: {doubleCount() {return this.$store.state.count * 2;}
},// 提交mutation
methods: {increment() {this.$store.commit(increment);}
},// 分发actionincrementAsync() {this.$store.dispatch(incrementAsync);}
}Vuex 的模块化
模块化的好处
组织代码大型应用中状态管理的逻辑可以分散到不同的文件中。命名空间模块的 getters、actions 和 mutations 可以自动拥有命名空间。
创建模块
const moduleA {namespaced: true,state: { ... },getters: { ... },mutations: { ... },actions: { ... }
};const store new Vuex.Store({modules: {a: moduleA}
});Vuex 的持久化
持久化的好处
状态恢复在应用重新加载时恢复状态。调试在开发过程中可以查看状态变化的历史。
实现持久化
使用localStorage或第三方库如vuex-persistedstate来实现
npm install vuex-persistedstateimport createPersistedState from vuex-persistedstate;const store new Vuex.Store({state: {count: 0,},plugins: [createPersistedState({key: vuex,paths: [count],}),],
});Vuex 辅助函数
Vuex 提供了几个辅助函数可以帮助我们更方便地在组件中使用 store 中的状态和函数。
mapState
mapState函数允许你将 store 中的 state 映射到组件的计算属性中。
import { mapState } from vuex;export default {computed: {...mapState([// 映射 this.count 为 store.state.countcount,]),// 也可以使用对象展开运算符...mapState({// 映射 this.doubleCount 为 store.state.count * 2doubleCount: (state) state.count * 2,}),},
};mapGetters
mapGetters函数与mapState类似但它用于映射 getters。
import { mapGetters } from vuex;export default {computed: {...mapGetters([// 映射 this.doneCount 为 store.getters.doneTodosCountdoneCount,]),},
};mapActions
mapActions函数允许你将 actions 映射为组件的方法。
import { mapActions } from vuex;export default {methods: {...mapActions([// 映射 this.increment() 为 store.dispatch(increment)increment,]),// 也可以使用对象展开运算符...mapActions({// 映射 this.incrementIfOdd 为 store.dispatch(incrementIfOdd)incrementIfOdd: incrementIfOdd,}),},
};mapMutations
mapMutations函数允许你将 mutations 映射为组件的方法。
import { mapMutations } from vuex;export default {methods: {...mapMutations([// 映射 this.increment() 为 store.commit(increment)increment,]),// 也可以使用对象展开运算符...mapMutations({// 映射 this.setCount 为 store.commit(setCount)setCount: setCount,}),},
};创建一个带有模块化和持久化的计数器应用 创建模块化的 store store.js const moduleA {namespaced: true,state: { count: 0 },mutations: {increment(state) {state.count;},},
};const store new Vuex.Store({modules: { a: moduleA },plugins: [createPersistedState()],
});在 Vue 实例中使用 store main.js new Vue({store,render: (h) h(App),
}).$mount(#app);在组件中访问模块化状态 !-- Component.vue --
templatep{{ aCount }}/pbutton clickincrementAIncrement Module A/button
/templatescriptexport default {computed: {aCount() {return this.$store.state.a.count;},},methods: {incrementA() {this.$store.commit(a/increment);},},};
/script结语
在本站的 Vue 探索之旅中我们学习了 Vuex 的核心概念、模块化和持久化。通过模块化我们可以更好地组织大型应用的状态管理逻辑通过持久化我们可以在应用重新加载时恢复状态。这些工具和概念将帮助我们构建更加健壮和可维护的 Vue 应用。
互动交流
欢迎在文章下方留言分享学习 Vuex 状态管理的心得体会或提出在学习过程中遇到的问题。我们将在后续的文章中提供解答和指导。 注意本文内容会根据 Vue.js 和 Vuex 的最新版本进行更新确保提供的信息是最新的。同时为了提高文章的可读性我们使用了清晰的代码块和图表。希望本文能够帮助你深入理解 Vue 的状态管理并为你的 Vue 学习之旅添砖加瓦。
