vuex存储数据后，数据改变，视图不变的解决方法

最新推荐文章于 2024-06-20 09:33:03 发布

努力奋斗的小前端

最新推荐文章于 2024-06-20 09:33:03 发布

阅读量678

点赞数 5

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_61447843/article/details/122168445

版权

方法就是通过调用Vue.set(target,key,value),

target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

举例：

我现在写一个加入购物车数据，上面是商品数据，下面是购物车数据，当我把商品数据添加进购物车后，点击加时，购物车的num数据改变了，但视图没有变化，这时就在加入购物车时，调用vue.set就行，Vue.set(item,'num',1)，item是我传来的单个商品数据，num是购物车没有这个商品时，要添加给购物车数据的数量，1为添加给购物车数据的数量得默认值，默认值为1

  mutations: {
    addCart(state, item) {
      console.log(item);
      let index = state.shopcar.findIndex(items => {
        return items.id == item.id
      })
      if (index > -1) {
        item.num++
      } else {
        Vue.set(item,'num',1)
        state.shopcar.push(item)
      }
    },