watch實現監聽Vuex狀態監聽(利用computed)

来源:https://www.cnblogs.com/eternityz/archive/2020/02/07/12272527.html
-Advertisement-
Play Games

當需要從vuex中獲取的變數特別多是,可以使用mapState代替 當一個組件需要獲取多個狀態時候,將這些狀態都聲明為計算屬性會有些重覆和冗餘。為瞭解決這個問題,我們可以使用 mapState 輔助函數幫助我們生成計算屬性,讓你少按幾次鍵: // 在單獨構建的版本中輔助函數為 Vuex.mapSta ...


Vuex 通過 store 選項,提供了一種機制將狀態從根組件“註入”到每一個子組件中(需調用 Vue.use(Vuex)):通過在根實例中註冊 store 選項,該 store 實例會註入到根組件下的所有子組件中,且子組件能通過 this.$store 訪問到

computed: {
    f1() {
        return this.$store.state.xxxx
  }
},
watch: {
    f1(curVal, oldVal) {
          //這裡的curVal就是需要監聽的值
    }
 }

computed 里一般寫個函數,這個函數里一定是return一個結果。 這裡你可以直接用f1作為本組件監聽$store.state.xxxx, 也可以在本組件里聲明一個變數然後再通過watch監聽,將watch中的curVal賦值給該變數從而達到使用的目的。

當需要從vuex中獲取的變數特別多是,可以使用mapState代替

當一個組件需要獲取多個狀態時候,將這些狀態都聲明為計算屬性會有些重覆和冗餘。為瞭解決這個問題,我們可以使用 mapState 輔助函數幫助我們生成計算屬性,讓你少按幾次鍵:

// 在單獨構建的版本中輔助函數為 Vuex.mapState

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭頭函數可使代碼更簡練
    count: state => state.count,

    // 傳字元串參數 'count' 等同於 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態,必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

當映射的計算屬性的名稱與 state 的子節點名稱相同時,我們也可以給 mapState 傳一個字元串數組。

computed: mapState([
  // 映射 this.count 為 store.state.count
  'count'
])

對象展開運算符
mapState 函數返回的是一個對象。我們如何將它與局部計算屬性混合使用呢?通常,我們需要使用一個工具函數將多個對象合併為一個,以使我們可以將最終對象傳給 computed 屬性。但是自從有了對象展開運算符(現處於 ECMAScript 提案 stage-4 階段),我們可以極大地簡化寫法:

computed: {
  localComputed () { /* ... */ },
  // 使用對象展開運算符將此對象混入到外部對象中
  ...mapState({
    // ...
  })
}

站在巨人的肩膀上摘蘋果:

鏈接:https://www.jianshu.com/p/b5365c05882b


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 今天再重新配置老項目node打包環境的時候遇到了一個問題。 在打包的時候報: (這裡需要強調一下,安裝環境的使用一定要 save dev或者是 save,否則欲哭無淚啊) 很明顯,這是node一些包的版本對應不上的問題。。。 站在巨人的肩膀上摘蘋果: 原文:https://blog.csdn.net ...
  • vue ls NPM Yarn Usage Vue storage API. Global Context API Vue.ls.get(name, def) Vue.ls.set(name, value, expire) Vue.ls.remove(name) Vue.ls.clear() Vue ...
  • Vue使用import ... from ...來導入組件,庫,變數等。而from後的來源可以是js,vue,json。這個是在webpack.base.conf.js中設置的: 這裡的extensions指定了from後可導入的文件類型。 而上面定義的這3類可導入文件,js和vue是可以省略尾碼的 ...
  • 節點查找方法 document.getElementById() 前面必須是document document.getElementsByName() 前面必須是document ele.getElementsByTagName() 前面元素不限 ele.getElementsByClassName ...
  • 背景 我們經常使用 Chrome Dev Tools 來開發調試,但是很少知道怎麼利用它來分析頁面性能,這篇文章,我將詳細說明怎樣利用 Chrome Dev Tools 進行頁面性能分析及性能報告數據如何解讀。 分析面板介紹 上圖是 Chrome Dev Tools 的一個截圖,其中,我認為能用於進 ...
  • 掛載全局方法 使用jsencrypt進行rsa加密 原文鏈接:Js參數RSA加密傳輸,jsencrypt.js的使用 CSDN博客 https://blog.csdn.net/p312011150/article/details/80264144 (原文處有一個地方不對,不需要轉換+,rsa已經做過 ...
  • ``` 你把函數定義在 Vue 的原型鏈上,只能在 Vue 的實例里才能取到這個方法。 vue組件 是一個Vue 的實例,所以你當然能在這裡調用到 ajax 方法。 而,vuex 只是一個 vue插件,在 vuex 里的 this 不是指向 vue實例的,所以肯定是取不到 ajax 方法的。 建議:... ...
  • vue cli3 一直運行 /sockjs node/info?t= 解決方案 首先 sockjs node 是一個JavaScript庫,提供跨瀏覽器JavaScript的API,創建了一個低延遲、全雙工的瀏覽器和web伺服器之間通信通道。 服務端:sockjs node(https://gith ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...