如何修改vuex里面的数据
作者：柠檬树^-^
这篇文章主要介绍了如何修改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)
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。