Vuex中怎么利用commit保存数据,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。vuex 单向数据流,推荐的commit 改变stat
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使用严格模式也不会报错了。
关于vuex中怎么利用commit保存数据问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网JavaScript频道了解更多相关知识。
--结束END--
本文标题: vuex中怎么利用commit保存数据
本文链接: https://www.lsjlt.com/news/72441.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0