Vuex 运行时机制的详细说明
运行机制:Vuex提供数据(state),来驱动视图(这里指的是Vue组件),视图通过Dispatch派发Action,在Action中可以进一步做一些异步的操作(例如通过ajax请求后端的接口数据),然后通过Commit提交给Mutations,由Mutations去最终更改state。那么为什么要经过Mutations呢?这是因为我们要在Vue调试工具(Devtools)中记录数据的变化,这样可以通过插件去进行进一步的调试。所以说Mutations中只能是纯同步的操作,如果是有异步操作,那么就需要在Actions中进行处理。如果说没有异步操作,那么可以直接由组件进行Commit操作Mutations。
高级用法辅助函数(语法糖) mapState,mapActions,mapMutations,mapGetters
辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
如何使用:
Import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
computed(){ ...mapState(['数据名字'])}
Vuex 页面刷新数据丢失怎么解决 需要做 vuex 数据持久化 一般使用本地存储的方案来保存数据 可以自己设计存储方案 也可以使用第三方插件
推荐使用 vuex-persist 插件,它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中
Vuex 为什么要分模块并且加命名空间 模块:由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。方便管理
推荐阅读
-
如何在 gitee 上查看用户名的详细说明
-
go 命令会生成功能的详细说明
-
PROGPPCNEXUS 读/写烧/写刷/写软件详细说明及在 Freescale MPC55xx 56xx 57xx 58xx 系列芯片上的应用
-
千卡利用率超过 98%,在权威人工智能测试中详细说明 JuiceFS 的实施策略
-
子网划分详细说明和实例分析 - 最好的网络
-
学习英语的详细说明(VI)比较
-
详细说明如何申请注册自己的电子邮件帐户?如何注册电子邮件帐户?
-
CountDownLatch 的详细说明
-
GitHub 教程:如何从 GitHub 下载文件(下载单个文件或下载整个项目文件)的详细步骤说明(图解教程)
-
在哪里打印测试页 详细说明:打印测试页的打印步骤