如何修改vuex里面的數(shù)據(jù)

更新時(shí)間：2025年04月09日 08:38:20 作者：檸檬樹^-^

這篇文章主要介紹了如何修改vuex里面的數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

修改vuex里面的數(shù)據(jù)

Vuex 使用 mutations 來修改狀態(tài)數(shù)據(jù)。Mutation 提供了一種在同步方式下修改 Vuex state 的方式，確保所有狀態(tài)的變更都可以被追蹤。

首先，在 Vuex store 中定義一個(gè) mutation?？梢酝ㄟ^ store.commit() 方法來觸發(fā) mutation。

例如：我們給state中的cart追贈(zèng)數(shù)據(jù)

store/index.js

state:{
  cart:[]
},
mutations:{
  updateCart(state,cart){
      state.cart=cart
    }
}

渲染數(shù)據(jù)：

<view  v-for="(item,index)in cart" :key="index">
   xxx
<view>

import { mapState } from 'vuex';
  export default {
    computed:{
      ...mapState(['cart'])
    }
  }

需求：增加新的數(shù)據(jù)（方法）

錯(cuò)誤示范

案例1：

this.$store.state.cart.push()

問題：很明顯這么干是錯(cuò)誤的，因?yàn)閟tate的數(shù)據(jù)只能由mutations來修改

案例2：

const cartList=this.$store.state.cart
cartList.push()
this.$store.commit('updateCart',xxxx)

問題：這樣也是錯(cuò)誤的，看起來是通過commit觸發(fā)mutations來修改cart數(shù)據(jù)的，其實(shí)

const cartList=this.$store.state.cart
cartList.push()

這兩步就已經(jīng)可以實(shí)現(xiàn)數(shù)據(jù)的添加，雖然數(shù)據(jù)添加成功了，但是在控制臺(tái)vuex中cart的數(shù)據(jù)并沒有發(fā)生變化，這是因?yàn)閟tate中的數(shù)據(jù)雖然更改了，但是沒有經(jīng)過mutations，所有狀態(tài)的變更都不可以被追蹤到。

手動(dòng)點(diǎn)擊Root相當(dāng)于刷新vuex，這時(shí)候vuex中的cart數(shù)據(jù)更新到最新的狀態(tài)，但是并不知道什么時(shí)候更改的，對(duì)后期如果想要操作cart中的數(shù)據(jù)有影響

正確寫法

先深拷貝，在新增

computed:{
   cart(){
        return JSON.parse(JSON.stringify(this.$store.state.cart))
   }

     
method:{
  updateData(){
      this.cart.push(xxx)
      this.$store.commit('updateCart',this.cart)
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

vue關(guān)于data變量定義的問題
這篇文章主要介紹了vue關(guān)于data變量定義的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
詳解Vue如何通過URL傳遞與獲取參數(shù)
Vue Router 路由實(shí)際上就是一種映射關(guān)系,例如,多個(gè)選項(xiàng)卡之間的切換就可以使用路由功能來實(shí)現(xiàn),在實(shí)際的開發(fā)中,經(jīng)常需要通過URL來傳遞參數(shù),同時(shí)在 JavaScript 腳本中需要獲取URL中的參數(shù),下面將介紹 Vue 項(xiàng)目中,如何通過 URL 對(duì)參數(shù)進(jìn)行傳遞與獲取,需要的朋友可以參考下
2024-09-09
vue中如何給data里面的變量增加屬性
這篇文章主要介紹了vue中如何給data里面的變量增加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
基于vue-video-player自定義播放器的方法
這篇文章主要介紹了基于vue-video-player自定義播放器的方法，主要是基于video.js開發(fā)的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以參考下
2018-03-03
vue框架中props的typescript用法詳解
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語(yǔ)法。這篇文章主要介紹了vue框架中props的typescript用法,需要的朋友可以參考下
2020-02-02
vue-cli3.0按需引入element-ui組件方式
這篇文章主要介紹了vue-cli3.0按需引入element-ui組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue3的provide和inject實(shí)現(xiàn)多級(jí)傳遞的原理解析
Vue3中的provide和inject函數(shù)通過原型鏈實(shí)現(xiàn)數(shù)據(jù)的多級(jí)傳遞,父組件使用provide注入數(shù)據(jù),子組件和后代組件通過inject獲取這些數(shù)據(jù),在創(chuàng)建組件實(shí)例時(shí),子組件會(huì)繼承父組件的provides屬性對(duì)象,介紹Vue3的provide和inject實(shí)現(xiàn)多級(jí)傳遞的原理,需要的朋友可以參考下
2024-12-12
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
圖文詳解keep-alive如何清除緩存
vue項(xiàng)目中常常會(huì)用到keepalive來作緩存,在應(yīng)付基本要求上能夠說很是方便,可是遇到同一個(gè)頁(yè)面,根據(jù)條件不一樣,分別緩存或者不緩存,就有些麻煩了,這篇文章主要給大家介紹了關(guān)于keep-alive如何清除緩存的相關(guān)資料,需要的朋友可以參考下
2021-08-08
Vue之el-select結(jié)合v-if動(dòng)態(tài)控制template顯示隱藏方式
這篇文章主要介紹了Vue之el-select結(jié)合v-if動(dòng)態(tài)控制template顯示隱藏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04