首頁 web前端 js教程 vuex中如何使用物件展開運算子實例詳解

vuex中如何使用物件展開運算子實例詳解

Feb 01, 2018 pm 01:22 PM
vuex 物件 展開

當需要進行vuex進行資料狀態管理的時候,會使用到mapGetters,mapState,還有自身的計算屬性的時候,這個時候就會用到這個了!本文主要跟大家介紹vuex中使用物件展開運算子的範例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

1.首先需要安裝


npm install babel-plugin-transform-object-rest-spread -D
登入後複製

2.需要在.babelrc檔案中新增以下


{

 "presets": [

  ["env", { "modules": false }]

 ],

 "plugins": ["transform-object-rest-spread"] //增加这一行

}
登入後複製

3.在vue元件中使用


<script>

  import {mapState,mapGetters} from &#39;vuex&#39;

  export default {

    methods:{

      increment(){

        this.$store.commit(&#39;increment&#39;);

      }

    },

    computed:{

      ...mapGetters([

        &#39;count&#39;

      ]),

      ...mapState({

        counts(){

          return this.$store.state.count;

        }

      })

    }

  }

</script>
登入後複製

相關推薦:

JavaScript中運算子規則和隱式類型轉換範例詳解

Mysql之運算子與函數的總結

詳細介紹JavaScript中運算子規則與隱含型別轉換

以上是vuex中如何使用物件展開運算子實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1273
29
C# 教程
1252
24
使用PHP的json_encode()函數將陣列或物件轉換為JSON字串 使用PHP的json_encode()函數將陣列或物件轉換為JSON字串 Nov 03, 2023 pm 03:30 PM

JSON(JavaScriptObjectNotation)是一種輕量級的資料交換格式,已成為Web應用程式之間資料交換的常用格式。 PHP的json_encode()函數可以將陣列或物件轉換為JSON字串。本文將介紹如何使用PHP的json_encode()函數,包括語法、參數、傳回值以及具體的範例。語法json_encode()函數的語法如下:st

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

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

使用Python的__contains__()函數定義物件的包含操作 使用Python的__contains__()函數定義物件的包含操作 Aug 22, 2023 pm 04:23 PM

使用Python的__contains__()函數定義物件的包含操作Python是一種簡潔而強大的程式語言,提供了許多強大的功能來處理各種類型的資料。其中之一是透過定義__contains__()函數來實現物件的包含操作。本文將介紹如何使用__contains__()函數來定義物件的包含操作,並且給予一些範例程式碼。 __contains__()函數是Pytho

如何將 MySQL 查詢結果陣列轉換為物件? 如何將 MySQL 查詢結果陣列轉換為物件? Apr 29, 2024 pm 01:09 PM

將MySQL查詢結果陣列轉換為物件的方法如下:建立一個空物件陣列。循環結果數組並為每一行建立一個新的物件。使用foreach迴圈將每一行的鍵值對賦給新物件的對應屬性。將新物件加入到物件數組中。關閉資料庫連線。

在Vue應用中使用vuex時出現「Error: [vuex] do not mutate vuex store state outside mutation handlers.」怎麼解決? 在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.」這個錯誤提示是什麼意思呢?為什麼會出現這個錯誤提示?如何解決這個錯誤?本文將詳細介紹這個問題。錯誤提示的含

使用Python的__le__()函數定義兩個物件的小於等於比較 使用Python的__le__()函數定義兩個物件的小於等於比較 Aug 21, 2023 pm 09:29 PM

標題:使用Python的__le__()函數定義兩個物件的小於等於比較在Python中,我們可以透過使用特殊方法來定義物件之間的比較操作。其中之一就是__le__()函數,它用來定義小於等於比較。 __le__()函數是Python中的一個魔法方法,並且是一種用於實現「小於等於」操作的特殊函數。當我們使用小於等於運算子(&lt;=)比較兩個物件時,Python

PHP 函數如何傳回物件? PHP 函數如何傳回物件? Apr 10, 2024 pm 03:18 PM

PHP函數可以透過使用return語句後接物件實例來傳回對象,從而將資料封裝到自訂結構中。語法:functionget_object():object{}。這允許創建具有自訂屬性和方法的對象,並以對象的形式處理資料。

C++ 函式回傳物件時有什麼需要注意的? C++ 函式回傳物件時有什麼需要注意的? Apr 19, 2024 pm 12:15 PM

在C++中,函數傳回物件需要注意三點:物件的生命週期由呼叫者負責管理,以防止記憶體洩漏。避免懸垂指針,透過動態分配記憶體或返回物件本身來確保物件在函數返回後仍然有效。編譯器可能會最佳化傳回物件的副本生成,以提高效能,但如果物件是值語義傳遞的,則無需副本生成。

See all articles