如何修改vuex里面的数据
更新时间：2025年04月09日 08:38:20 作者：柠檬树^-^
这篇文章主要介绍了如何修改vuex里面的数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
修改vuex里面的数据
Vuex 使用 mutations 来修改状态数据。Mutation 提供了一种在同步方式下修改 Vuex state 的方式，确保所有状态的变更都可以被追踪。
首先，在 Vuex store 中定义一个 mutation。可以通过 store.commit() 方法来触发 mutation。
例如：我们给state中的cart追赠数据
store/index.js
state:{
cart:[]
},
mutations:{
updateCart(state,cart){
state.cart=cart
}
}渲染数据：
<view v-for="(item,index)in cart" :key="index">
xxx
<view>
import { mapState } from 'vuex';
export default {
computed:{
...mapState(['cart'])
}
}需求：增加新的数据（方法）
错误示范
- 案例1：
this.$store.state.cart.push()
问题：很明显这么干是错误的，因为state的数据只能由mutations来修改
- 案例2：
const cartList=this.$store.state.cart
cartList.push()
this.$store.commit('updateCart',xxxx)问题：这样也是错误的，看起来是通过commit触发mutations来修改cart数据的，其实
const cartList=this.$store.state.cart cartList.push()
这两步就已经可以实现数据的添加，虽然数据添加成功了，但是在控制台vuex中cart的数据并没有发生变化，这是因为state中的数据虽然更改了，但是没有经过mutations，所有状态的变更都不可以被追踪到。
手动点击Root相当于刷新vuex，这时候vuex中的cart数据更新到最新的状态，但是并不知道什么时候更改的，对后期如果想要操作cart中的数据有影响
正确写法
先深拷贝，在新增
computed:{
cart(){
return JSON.parse(JSON.stringify(this.$store.state.cart))
}
method:{
updateData(){
this.cart.push(xxx)
this.$store.commit('updateCart',this.cart)
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue关于data变量定义的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue Router 路由实际上就是一种映射关系,例如,多个选项卡之间的切换就可以使用路由功能来实现,在实际的开发中,经常需要通过URL来传递参数,同时在 JavaScript 脚本中需要获取URL中的参数,下面将介绍 Vue 项目中,如何通过 URL 对参数进行传递与获取,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue中如何给data里面的变量增加属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了基于vue-video-player自定义播放器的方法，主要是基于video.js开发的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以参考下2018-03-03
typescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法。这篇文章主要介绍了vue框架中props的typescript用法,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue-cli3.0按需引入element-ui组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue3的provide和inject实现多级传递的原理解析
Vue3中的provide和inject函数通过原型链实现数据的多级传递,父组件使用provide注入数据,子组件和后代组件通过inject获取这些数据,在创建组件实例时,子组件会继承父组件的provides属性对象,介绍Vue3的provide和inject实现多级传递的原理,需要的朋友可以参考下2024-12-12
Vue3+Vite中不支持require的方式引入本地图片的解决方案
这篇文章主要介绍了Vue3+Vite中不支持require的方式引入本地图片的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
vue项目中常常会用到keepalive来作缓存,在应付基本要求上能够说很是方便,可是遇到同一个页面,根据条件不一样,分别缓存或者不缓存,就有些麻烦了,这篇文章主要给大家介绍了关于keep-alive如何清除缓存的相关资料,需要的朋友可以参考下2021-08-08
Vue之el-select结合v-if动态控制template显示隐藏方式
这篇文章主要介绍了Vue之el-select结合v-if动态控制template显示隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论