首页 > 其他分享 >vuejs3.0 从入门到精通——Vuex 4.x —— state

vuejs3.0 从入门到精通——Vuex 4.x —— state

时间:2023-11-13 16:46:55浏览次数:32  
标签:状态 Vue 对象 vuejs3.0 state Vuex 单一

Vuex 4.x —— state

https://vuex.vuejs.org/zh/guide/state.html

一、单一状态树

  Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

  单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

  存储在 Vuex 中的数据和 Vue 实例中的data遵循相同的规则,例如状态对象必须是纯粹 (plain) 的。

在Vuex中,我们使用单一状态树来管理应用的状态。这意味着所有的状态都被存储在一个单一的对象中,这个对象就是我们的“唯一数据源(SSOT)”。这种方式的优点在于,我们可以非常方便地跟踪和管理状态,同时在调试过程中,我们也可以轻松地获取到应用当前状态的完整快照。

单一状态树并不意味着我们不能将状态进行模块化管理。实际上,我们可以将状态以及状态的变更事件分布到各个子模块中。这样既可以保持状态的集中管理,又能够实现代码的模块化和可维护性。

同时,Vuex中的数据和Vue实例中的data遵循相同的规则,都是使用纯粹(plain)的对象。这意味着它们都是普通的JavaScript对象,不能包含任何特殊的Vue对象或函数。这样做的原因是为了保证状态的透明性和可预测性。只有纯粹的对象才能被序列化和反序列化,从而使得状态的变化可以被记录和跟踪。

二、在 Vue 组件中获得 Vuex 状态

三、mapState 辅助函数

四、对象展开运算符

五、组件仍然保有局部状态

标签:状态,Vue,对象,vuejs3.0,state,Vuex,单一
From: https://www.cnblogs.com/zuoyang/p/17829469.html

相关文章

  • vuejs3.0 从入门到精通——Vuex
    Vuexhttps://vuex.vuejs.org/zh/一、Vue是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。1.1、什么是"状态管理模式"? 状态管理模式是一种在前端开发中管理......
  • vuejs3.0 从入门到精通——provide、inject、mixins、extends
    provide、inject、mixins、extends一、provide二、inject三、mixins四、extendshttps://cn.vuejs.org/api/options-composition.html#mixins 一个包含组件选项对象的数组,这些选项都将被混入到当前组件的实例中。interfaceComponentOptions{mixins?:ComponentOptio......
  • Vue使用vuex刷新页面后state数据丢失
    使用 createPersistedState做持久化安装:npminstallvuex-persistedstate--save使用:importVuefrom'vue';importVuexfrom'vuex';importcreatePersistedStatefrom'vuex-persistedstate'importnavCollapsefrom'./modules/navCol......
  • #yyds干货盘点#react的useState源码分析
    简单说下为什么React选择函数式组件,主要是class组件比较冗余、生命周期函数写法不友好,骚写法多,functional组件更符合React编程思想等等等。更具体的可以拜读dan大神的blog。其中Functioncomponentscapturetherenderedvalues这句十分精辟的道出函数式组件的优势。但是在16.8之......
  • vuejs3.0 从入门到精通——动态组件
    动态组件一、App.vue<template><ul><!--使用ul标签替代了错误的url标签,用于展示列表--><liv-for='(item,index)intabList':key='index'@click="()=>{currentComponent.com=tabList[index].com}"><!--......
  • PreTrainedModel 中 from_pretrained 和 load_state_dict 的关联
    from_pretrainedAutoTokenizer.from_pretrained:从path/vocab.json中加载tokenizerAutoConfig.from_pretrained:从path/config.json中加载模型配置信息更新模型配置信息:model=Model(config)PreTrainedModel.from_pretrained:加载模型结构和模型参数load_checkpoint......
  • 多标签vuex
    vuex只有在第一次打开页面或页面刷新时会初始化,不受页面生命周期影响。在vue打开多标签页面共享vuex时,多个页面vuex单独不受影响,所以如果某个页签修改了vuex的值,其他页签并不会同步修改。多页签同步vuex的思路:监听页签选中状态,选中时判断当前vuex同步值与本地存储值,不相同调用mu......
  • vuejs3.0 从入门到精通——Element Plus 组件库
    ElementPlus组件库一、ElementPlus 基于Vue3,面向设计师和开发者的组件库。二、完整导入https://element-plus.org/zh-CN/guide/quickstart.html#完整引入 如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。//main.tsimport{createApp}from'vu......
  • Invalid bound statement (not found)原因
    我犯的错误resources下直接创建的xml,没有创建mapper文件夹,所以导致找不到xml文件修改前修改后然后就解决了网上搜到的几种https://blog.csdn.net/kwppwk/article/details/131832124......
  • LINUX:Error while compiling statement: FAILED: RuntimeException Cannot create sta
    问题截图 可以看到是user=root,权限不够导致 观察发现用的是root用户更改为hadoop用户,也即是可以启动hive的用户 插入成功。 ......