详解vuex commit保存数据技巧

vuex 单向数据流，推荐的commit 改变state数据，写起来非常繁琐，因为改数据可能要写很多commit函数。

依据我的理解，单向数据流主要是为了避免数据混乱，便于调试。 说白了，就是一个数据改变了，是什么促使他改变的。

数据流向永远都是一个方向，下游是没有权利改变数据的，所以需要数据发放中心同一级的方法来改变数据。

单项数据流，对于react来说，的确是必要的，但对于vue来说，是那么有必要吗？

vue采用数据依赖更新，必要的数据都采用Object.defineProperty处理。给数据赋值时，本来就会通知所有采用此数据的dom更新，不管是不是父级还是子级组建的dom。

使用vuex时 官方推荐使用commit才修改state数据。

优点

  • 便于调试，当数据变化时，可以在vuetools工具中看到是哪个函数修改了state值。

缺点

  • 采用commit修改数据，可能会写很多mutations函数。
  • 会上丧失掉一部分性能。因为新数据需要重新配置watcher。

优化

对于采用commit保存state数据的，可以采用如下方式：

传一个字符串的path和需要修改的值,如果path='a.b.c'就换算成 state.a.b.c = 'needsave', 这就达到了一个commit 解决所有保存的问题。

// mutations中的函数
save(state, { path, data }) {
 if (!path ) {
 throw new Error('need path')
 }
 const keyPath = path.split('.')
 let needSave = state
 for (let i = 0; i < keyPath.length - 1; i++) {
 needSave = needSave[keyPath[i]]
 if(!needSave) {
 throw new Error(`error path: ${keyPath[i]}`)
 }
 }

 needSave[keyPath[keyPath.length - 1]] = data
},
// 使用
vuex.commit('save', {path:'a.b.c', data:val})
// 结果
state.a.b.c = '我是需要保存的数据'

在组件中

//如果要双向绑定某个vuex中的值。
<input v-model="c">

//script

computed: {
 c: {
  get(){
   return vuex.state.a.b.c
  },
  set(val) {
   vuex.commit('save', {path:'a.b.c', data:val})
  }
 }
}
// 这样就做到了在组件中双向绑定，并且使用commit改变state中的值，vuex使用严格模式也不会报错了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)

    Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点.而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解. 举个例子,通知组件notification基本是现代web开发标配,在很多地方都能用到.而在以Vue作为核心框架的前端项目中,因

  • vue使用技巧及vue项目中遇到的问题

    这里给大家分享一下vue中的一些技巧,希望对大家有用处.(话不多说上代码) 1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息.) //在路由组件中: mounted(){ }, beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单,或者自动后台为其保存 }else{ next(true);//用户离开 } 请参考vue文档全局钩子和组件钩子 2,路由懒加载写法: // 我所采用的方

  • vue的传参方式汇总和router使用技巧

    vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, }) 3,获取方法(在describe页面) $route.params.id 使用以上方法可以拿到上个页面传过来的id值 vue

  • Vue项目中最新用到的一些实用小技巧

    Vue项目中最新用到的一些实用小技巧

    写在前面 在最近的 Vue 项目中,为了完成需求使用了一些小技巧,做个笔记,或许也能帮到道友. 阅读重点 需求一:为路径配置别名 在开发过程中,我们经常需要引入各种文件,如图片.CSS.JS等,为了避免写很长的相对路径(../),我们可以为不同的目录配置一个别名. 找到 webpack.base.config.js 中的 resolve 配置项,在其 alias 中增加别名,如下: 创建一个 CSS 文件,随便写点样式: .avatar display: flex; justify-conten

  • 实用的Vue开发技巧

    实用的Vue开发技巧

    1 状态共享 随着组件的细化,就会遇到多组件状态共享的情况,Vuex当然可以解决这类问题,不过就像Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是vue.js 2.6新增加的Observable API,通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况. 如下这个例子,我们将在组件外创建一个store,然后在App.vue组件里面使用store.js提供的store和mutation方法,同理其它组件也可以这样使用,从而实现多个组件共享

  • 详解vuex commit保存数据技巧

    vuex 单向数据流,推荐的commit 改变state数据,写起来非常繁琐,因为改数据可能要写很多commit函数. 依据我的理解,单向数据流主要是为了避免数据混乱,便于调试. 说白了,就是一个数据改变了,是什么促使他改变的. 数据流向永远都是一个方向,下游是没有权利改变数据的,所以需要数据发放中心同一级的方法来改变数据. 单项数据流,对于react来说,的确是必要的,但对于vue来说,是那么有必要吗? vue采用数据依赖更新,必要的数据都采用Object.defineProperty处理.给

  • 详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

  • 详解vuex的简单使用

    1 目录的配置 根据官方推荐在src目录里面创建store目录 2 创建store里面的文件 根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js 2.1 state.js state.js: 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态.至此它便作为一个『唯一数据源(SSOT)』而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接

  • 详解Mysql如何实现数据同步到Elasticsearch

    详解Mysql如何实现数据同步到Elasticsearch

    目录 一.同步原理 二.logstash-input-jdbc 三.go-mysql-elasticsearch 四.elasticsearch-jdbc 五.logstash-input-jdbc实现同步 六.go-mysql-elasticsearch实现同步 七.elasticsearch-jdbc实现同步 一.同步原理 基于Mysql的binlog日志订阅:binlog日志是Mysql用来记录数据实时的变化 Mysql数据同步到ES中分为两种,分别是全量同步和增量同步 全量同步表示第一次

  • 实例详解Android文件存储数据方式

    实例详解Android文件存储数据方式

    总体的来讲,数据存储方式有三种:一个是文件,一个是数据库,另一个则是网络.下面通过本文给大家介绍Android文件存储数据方式. 1.文件存储数据使用了Java中的IO操作来进行文件的保存和读取,只不过Android在Context类中封装好了输入流和输出流的获取方法. 创建的存储文件保存在/data/data/<package name>/files文件夹下. 2.操作. 保存文件内容:通过Context.openFileOutput获取输出流,参数分别为文件名和存储模式. 读取文件内容:通

  • 详解数据库中跨库数据表的运算

    1. 简单合并(FROM) 所谓跨库数据表,是指逻辑上同一张数据表被分别存储在不同数据库中.其原因有可能是因为数据量太大,放在一个数据库难以处理,也可能在业务上就需要将生产库和历史库分开.而不同的数据库,可能只是部署在不同的机器上的同种数据库,也可能是连类型都不同的数据库系统. 在面对跨库数据表,特别是数据库类型都不相同的情况时,数据库自带的工具往往就力所不及了,一般都需要寻找能够很好地支持多数据源类型的第三方工具,而集算器,可以说是其中的佼佼者了.下面,我们就针对几种常见的跨库混合运算情况详细

  • 详解git commit --amend 用法

    有时你提交过代码之后,发现一个地方改错了,你下次提交时不想保留上一次的记录:或者你上一次的commit message的描述有误,这时候你可以使用接下来的这个命令:git commit --amend. git功能十分强大,接下来我将讲解一下git commit --amend命令的用法~ git log之后,可以看到你之前提交过的git历史: ​ 接下来,在bash里输入wq退出log状态,执行: $ git commit --amend 这时bash里会出现以下内容: ​ 其中,second

  • 详解MySQL中的数据类型和schema优化

    最近在学习MySQL优化方面的知识.本文就数据类型和schema方面的优化进行介绍. 1. 选择优化的数据类型 MySQL支持的数据类型有很多,而如何选择出正确的数据类型,对于性能是至关重要的.以下几个原则能够帮助确定数据类型: 更小的通常更好 应尽可能使用可以正确存储数据的最小数据类型,够用就好.这样将占用更少的磁盘.内存和缓存,而在处理时也会耗时更少. 简单就好 当两种数据类型都能胜任一个字段的存储工作时,选择简单的那一方,往往是最好的选择.例如整型和字符串,由于整型的操作代价要小于字符,所

  • 详解python读取matlab数据(.mat文件)

    详解python读取matlab数据(.mat文件)

    我们都知道,matlab是一个非常好用的矩阵计算分析软件,然额,matlab自带的绘图效果极为锯齿,所以,这里分享一个在python中读取matlab处理后的数据.mat文件. 1.首先,我们这里先打开matlab,随便在命令行窗输入两个变量, matlab_x=1:0.01:10; matlab_y=sin(matlab_x); 2.计算处理后,matlab右边的工作区会有两个变量值,分别为matlab_y.matlab_x 3.然后,我们将鼠标放置在工作区空白位置右键,选择保存,也可以在工作

  • Java详解如何将excel数据转为树形

    Java详解如何将excel数据转为树形

    目录 前言 拆分原始数据 1.创建实体类 2.处理数据 手动设置每棵树每个节点的id以及父id 递归封装为树结构 总结 前言 今天收到一个导入的任务,要求将excel数据保存到数据库中,不同于普通的导入,这个导入的数据是一个树形结构,如下图: 通过观察数据中的层级列我们发现表格数据由2棵树组成,分别是第3,4,5,6,7,8,9,10,11和12,13,14,15,16,17,18,它们由0作树的根节点,1为0的子节点,2为相邻1的子节点,由此得出第一颗树的结构为: 拆分原始数据 1.创建实体类

随机推荐