在Vuex中Mutations修改狀態操作下詳解-js教程-PHP中文網

首頁

web前端

js教程

在Vuex中Mutations修改狀態操作下詳解

coldplay.xixi

Jul 29, 2020 pm 05:25 PM

vuex 修改狀態

在Vuex中Mutations修改狀態操作下詳解

上篇是讀取state，這篇是修改狀態。即如何操作Mutations。

一. $store.commit( )

Vuex提供了commit方法來修改狀態

1.store.js檔案

const mutations={
  add(state){
    state.count++
  },
  reduce(state){
    state.count--
  }
}

登入後複製

2.在button上的修改方法

#

二. 傳值

#最簡單的修改狀態的操作，在實際專案中我們常常需要在修改狀態時傳值。例如上邊的例子，是我們每次只加1，而現在我們要透過所傳的值來相加。其實我們只要在Mutations再加上一個參數，並在commit的時候傳遞就可以了。我們來看具體程式碼：

1.store.js

const mutations={
  add(state,n){
    state.count+=n
  },
  reduce(state){
    state.count--
  }
}

登入後複製

2.修改按鈕的commit( )方法傳遞的參數，我們傳遞10，意思是每次加10.

#三.模板取得Mutations方法

在實際開發中我們也不喜歡看到$store.commit( )這樣的方法出現，我們希望跟呼叫範本裡的方法一樣呼叫。

例如：@click=”reduce” 就跟沒引用vuex外掛一樣。

1.在範本count.vue裡用import 引入我們的mapMutations：

import { mapState,mapMutations } from 'vuex'

#2 .在模板的

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1237

Related knowledge

在Vue應用程式中使用vuex時出現「Error: [vuex] unknown action type: xxx」怎麼解決？ Jun 25, 2023 pm 12:09 PM

在Vue.js專案中，vuex是一個非常有用的狀態管理工具。它可以幫助我們在多個元件之間共享狀態，並提供了一種可靠的方式來管理狀態的變化。但使用vuex時，有時會遇到「Error:[vuex]unknownactiontype:xxx」的錯誤。這篇文章將介紹該錯誤的原因及解決方法。 1.錯誤原因在使用vuex時，我們需要定義一些actions和mu

在Vue應用中使用vuex時出現「Error: [vuex] do not mutate vuex store state outside mutation handlers.」怎麼解決？ Jun 24, 2023 pm 07:04 PM

在Vue應用程式中，使用vuex是常見的狀態管理方式。然而，在使用vuex時，我們有時可能會遇到這樣的錯誤提示：「Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers.」這個錯誤提示是什麼意思呢？為什麼會出現這個錯誤提示？如何解決這個錯誤？本文將詳細介紹這個問題。錯誤提示的含

Vue2.x中使用Vuex管理全域狀態的最佳實踐 Jun 09, 2023 pm 04:07 PM

Vue2.x是目前最受歡迎的前端框架之一，它提供了Vuex作為管理全域狀態的解決方案。使用Vuex能夠使得狀態管理更加清晰、易於維護，以下將介紹Vuex的最佳實踐，幫助開發者更好地使用Vuex以及提高程式碼品質。 1.使用模組化組織狀態Vuex使用單一狀態樹管理應用程式的全部狀態，將狀態從元件中抽離出來，使得狀態管理更加清晰易懂。在具有較多狀態的應用中，必須使用模組

Vue3中Vuex怎麼使用 May 14, 2023 pm 08:28 PM

Vuex是做什麼的？ Vue官方：狀態管理工具狀態管理是什麼?需要在多個元件中共享的狀態、且是響應式的、一個變，全都改變。例如一些全域要用的狀態資訊：使用者登入狀態、使用者名稱、地理位置資訊、購物車中商品、等等這時候我們就需要這麼一個工具來進行全域的狀態管理，Vuex就是這樣的一個工具。單一頁面的狀態管理View–>Actions—>State視圖層(view)觸發操作(action)變更狀態(state)回應回視圖層(view)vuex（Vue3.

深入了解vuex的實現原理 Mar 20, 2023 pm 06:14 PM

當面試被問到vuex的實現原理，你要怎麼回答？以下這篇文章就來帶大家深入了解vuex的實作原理，希望對大家有幫助！

在Vue應用程式中使用vuex時出現「TypeError: Cannot read property 'xxx' of undefined」怎麼解決？ Aug 18, 2023 pm 09:24 PM

在Vue應用中使用Vuex是非常常見的操作。然而，偶爾在使用Vuex時會遇到錯誤訊息“TypeError:Cannotreadproperty'xxx'ofundefined”，這個錯誤訊息的意思是無法讀取undefined的屬性“xxx”，導致了程式的錯誤。這個問題其實產生的原因很明顯，就是因為在呼叫Vuex的某個屬性的時候，這個屬性沒有被正確

vue3+vite中如何使用vuex Jun 03, 2023 am 09:10 AM

具體步驟：1、安裝vuex(vue3建議4.0+)pnpmivuex-S2、main.js中設定importstorefrom'@/store'//hx-app的全域設定constapp=createApp(App)app.use(store)3、新建相關的資料夾與文件，這裡配置多個不同vuex內部的js，使用vuex的modules來放置不同的頁面，文件，然後統一使用一個getters.jsindex.js核心文件，這裡使用了import.meta.glob ，而不