如何修改vuex里面的數(shù)據(jù)
修改vuex里面的數(shù)據(jù)
Vuex 使用 mutations 來修改狀態(tài)數(shù)據(jù)。Mutation 提供了一種在同步方式下修改 Vuex state 的方式，確保所有狀態(tài)的變更都可以被追蹤。
首先，在 Vuex store 中定義一個 mutation。可以通過 store.commit() 方法來觸發(fā) mutation。
例如：我們給state中的cart追贈數(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ù)（方法）
錯誤示范
- 案例1：
this.$store.state.cart.push()
問題：很明顯這么干是錯誤的，因為state的數(shù)據(jù)只能由mutations來修改
- 案例2：
const cartList=this.$store.state.cart
cartList.push()
this.$store.commit('updateCart',xxxx)問題：這樣也是錯誤的，看起來是通過commit觸發(fā)mutations來修改cart數(shù)據(jù)的，其實
const cartList=this.$store.state.cart cartList.push()
這兩步就已經(jīng)可以實現(xiàn)數(shù)據(jù)的添加，雖然數(shù)據(jù)添加成功了，但是在控制臺vuex中cart的數(shù)據(jù)并沒有發(fā)生變化，這是因為state中的數(shù)據(jù)雖然更改了，但是沒有經(jīng)過mutations，所有狀態(tài)的變更都不可以被追蹤到。
手動點擊Root相當于刷新vuex，這時候vuex中的cart數(shù)據(jù)更新到最新的狀態(tài)，但是并不知道什么時候更改的，對后期如果想要操作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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue關(guān)于data變量定義的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue Router 路由實際上就是一種映射關(guān)系,例如,多個選項卡之間的切換就可以使用路由功能來實現(xiàn),在實際的開發(fā)中,經(jīng)常需要通過URL來傳遞參數(shù),同時在 JavaScript 腳本中需要獲取URL中的參數(shù),下面將介紹 Vue 項目中,如何通過 URL 對參數(shù)進行傳遞與獲取,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue中如何給data里面的變量增加屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了基于vue-video-player自定義播放器的方法，主要是基于video.js開發(fā)的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實現(xiàn)多級傳遞的原理解析
Vue3中的provide和inject函數(shù)通過原型鏈實現(xiàn)數(shù)據(jù)的多級傳遞,父組件使用provide注入數(shù)據(jù),子組件和后代組件通過inject獲取這些數(shù)據(jù),在創(chuàng)建組件實例時,子組件會繼承父組件的provides屬性對象,介紹Vue3的provide和inject實現(xiàn)多級傳遞的原理,需要的朋友可以參考下2024-12-12
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue項目中常常會用到keepalive來作緩存,在應付基本要求上能夠說很是方便,可是遇到同一個頁面,根據(jù)條件不一樣,分別緩存或者不緩存,就有些麻煩了,這篇文章主要給大家介紹了關(guān)于keep-alive如何清除緩存的相關(guān)資料,需要的朋友可以參考下2021-08-08
Vue之el-select結(jié)合v-if動態(tài)控制template顯示隱藏方式
這篇文章主要介紹了Vue之el-select結(jié)合v-if動態(tài)控制template顯示隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04