如何修改vuex里面的數(shù)據(jù)
修改vuex里面的數(shù)據(jù)
Vuex 使用 mutations 來(lái)修改狀態(tài)數(shù)據(jù)。Mutation 提供了一種在同步方式下修改 Vuex state 的方式，確保所有狀態(tài)的變更都可以被追蹤。
首先，在 Vuex store 中定義一個(gè) mutation?？梢酝ㄟ^(guò) store.commit() 方法來(lái)觸發(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()
問(wèn)題：很明顯這么干是錯(cuò)誤的，因?yàn)閟tate的數(shù)據(jù)只能由mutations來(lái)修改
- 案例2：
const cartList=this.$store.state.cart
cartList.push()
this.$store.commit('updateCart',xxxx)問(wèn)題：這樣也是錯(cuò)誤的，看起來(lái)是通過(guò)commit觸發(fā)mutations來(lái)修改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ù)并沒(méi)有發(fā)生變化，這是因?yàn)閟tate中的數(shù)據(jù)雖然更改了，但是沒(méi)有經(jīng)過(guò)mutations，所有狀態(tài)的變更都不可以被追蹤到。
手動(dòng)點(diǎn)擊Root相當(dāng)于刷新vuex，這時(shí)候vuex中的cart數(shù)據(jù)更新到最新的狀態(tài)，但是并不知道什么時(shí)候更改的，對(duì)后期如果想要操作cart中的數(shù)據(jù)有影響
正確寫(xiě)法
先深拷貝，在新增
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變量定義的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue Router 路由實(shí)際上就是一種映射關(guān)系,例如,多個(gè)選項(xiàng)卡之間的切換就可以使用路由功能來(lái)實(shí)現(xiàn),在實(shí)際的開(kāi)發(fā)中,經(jīng)常需要通過(guò)URL來(lái)傳遞參數(shù),同時(shí)在 JavaScript 腳本中需要獲取URL中的參數(shù),下面將介紹 Vue 項(xiàng)目中,如何通過(guò) URL 對(duì)參數(shù)進(jìn)行傳遞與獲取,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue中如何給data里面的變量增加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了基于vue-video-player自定義播放器的方法，主要是基于video.js開(kāi)發(fā)的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以參考下2018-03-03
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語(yǔ)法。這篇文章主要介紹了vue框架中props的typescript用法,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue-cli3.0按需引入element-ui組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3的provide和inject實(shí)現(xiàn)多級(jí)傳遞的原理解析
Vue3中的provide和inject函數(shù)通過(guò)原型鏈實(shí)現(xiàn)數(shù)據(jù)的多級(jí)傳遞,父組件使用provide注入數(shù)據(jù),子組件和后代組件通過(guò)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
vue項(xiàng)目中常常會(huì)用到keepalive來(lái)作緩存,在應(yīng)付基本要求上能夠說(shuō)很是方便,可是遇到同一個(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