如何修改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.js，主要了解一下v-model、v-if、v-else、v-show、v-for等，感興趣的小伙伴們可以一起學(xué)習(xí)一下2016-12-12
vue3的ref、isRef、toRef、toRefs、toRaw詳細介紹
本文詳細講解了vue3的ref、isRef、toRef、toRefs、toRaw，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
今天小編就為大家分享一篇修改vue+webpack run build的路徑方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音播放功能
這篇文章主要介紹了在vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音,需要的朋友可以參考下2020-06-06
在本篇文章里小編給大家整理了一篇關(guān)于VUE項目中加載已保存的筆記實例方法，有興趣的讀者們可以參考下。2019-09-09
客戶端（vue框架）與服務(wù)器（koa框架）通信及服務(wù)器跨域配置詳解
本篇文章主要介紹了客戶端（vue框架）與服務(wù)器（koa框架）通信及服務(wù)器跨域配置詳解，具有一定的參考價值，有興趣的可以了解一下2017-08-08
項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法
這篇文章主要給大家介紹了關(guān)于項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vite具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue-cli2打包前和打包后的css前綴不一致的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了ant design vue中表格指定格式渲染方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細過程
這篇文章主要介紹了vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細過程,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01