vuex學習四----getters

阿新 • • 發佈：2019-02-20

1：有時候我們需要從store中的state中派生出一些狀態，例如對列表進行過濾並且計數；

computed:{
 doneTodosCount(){
  return   this.$store.state.todos.filter(todo=>todo.done).length
 }
}

如果有多個元件需要用的這個屬性，我們要麼複製這個函式；或者抽取到一個共享函式然後再多出匯入它；這2種方式都不理想
2：VUEX允許我們在store中定義getters，getters接受state作為他的第一個引數；

const store=new Vuex.Store({
 state:{
     todos:[
        {id:1 
, text:'...', done:true},
        {id:2, text:'...', done:false}
    ]   
    },
 getters:{
     doneTodos: state=>{
        return state.todos.filter(todo=>todo.done)
    }
    }
})

Getters會暴露為store.getters的物件

store.getters.doneTodos

Getters也可以接受其他getters最為第二個引數：

getters:{
    doneTodosCount 
:(state,getters)=>{
        return getters.doneTodos.length;
    }
}

我們可以很容易的在任何組建中使用它：

computed:{
    doneTodosCount(){
        return this.$store.getters.doneTodosCount
    }
}

3：mapGetters輔助函式
mapGetters輔助函式僅僅是將store中的getters對映到區域性計算屬性


import { mapGetters } from 'vuex'
export default 
{
    computed:{
    //使用物件展開運算子將getters混入computed物件中
        ...mapGetters({
        'doneTodosCount',
        'anotherGetters'
        })
    }
}

如果你想講一個getters屬性另外娶一個名字，使用物件的形式：

mapgetters({
    //對映this.doneCount為store.getters.doneTodosCount
    doneCount:'doneTodosCount'
})

vuex學習四----getters

1：有時候我們需要從store中的state中派生出一些狀態，例如對列表進行過濾並且計數； computed:{ doneTodosCount(){ return this.$store.state.todos.filter(todo=>t

vuex學習---getters

new default eth tor clas imp ... com 組件 vue是一個面向數據，只有一個層：view,在數據傳給客戶端之前，計算其相關的屬性，應該是什麽樣子，前面有個mapState([])遠程加載數據，加載的是一個靜態的數據，如果想獲取動態的數據，就

Struts2學習四----------動態方法調用

vuex學習---state訪問狀態對象

logs 裏的刪掉 button 個數 compute this commit state 在vuex學習---vuex簡介中已經介紹過vuex的簡單使用，在這個例子中，沿用以上的模板，介紹一下state訪問狀態對象的幾種寫法： <template>

Go語言學習(四)經常使用類型介紹

初始化過程 lines 第一個方法管理每一個 lds run 1.布爾類型 var v1 bool v1 = true; v2 := (1==2) // v2也會被推導為bool類型 2.整型類型長度（字節）值範

vuex學習

派生 nbsp 使用 sta pat .get 獲取學習個數 A Vuex就類似一個中間件,在state裏面定義了狀態的數據,比如state={ count:0 },後期用this.$store.state 獲取狀態,也可用mapState映射過去 B 在mutat

JS學習四（BOM DOM）

常用方法 p地址 eight 輸入 inter ash 一次 earch cti 　　　　BOM Screen對象 console.log(window.width);//屏幕寬度 console.log(window.hei

多線程編程學習四(Lock 的使用).

stat 情況 closed 查詢 ++ 線程鎖 notifyall 估計 bsp 一、前言本文要介紹使用Java5中 Lock 對象，同樣也能實現同步的效果，而且在使用上更加方便、靈活，主要包括 ReentrantLock 類的使用和ReentrantRead

spring學習四

跟蹤 ssi ebe ner actor .com string set sso 1： InitializingBean vs init-method InitializingBean 是一個接口，有一個方法afterPropertiesSet，不建議使用；

Servlet學習(四)——response

utf 對象 pan src 頁面 name 技術 win 兩個 1、概述在創建Servlet時會覆蓋service()方法，或doGet()或doPost()，這些方法都有兩個參數，一個是代表請求的request和代表響應response。 service方法中的res

現在軟件工程第四次作業-學習四象限且利用四象限分析項目產品

vuex 學習筆記

enc ++ 接受 out spa 使用方法操作異步執行 apm 1、vuex的簡單使用方法　　安裝： cnpm install vuex --save 　　使用：　　　　（1）新建一個store的文件夾　　　　　　代碼例子： import Vue from ‘

es6 學習四數組的學習

ddr 返回 ret rom eno 執行元素 index like 1. Array.from() 語法： Array.from(arrayLike[, mapFn[, thisArg]]) arrayLike 類數組對象 mapFn 如果指定了該參數，新數組中的每

WPF Binding學習(四) 綁定各種數據源

uri inf 位置雙向 mar 3.0 合作裏的 rate 1.集合作為數據源首先我們先創建一個模型類 public class Student { public int ID { get; set; } publi

學習四

裝系統光盤安裝 roc username ado 虛擬方塊用戶 img 一周第四次課（6月1日）1.13 單用戶模式1.14 救援模式1.15 克隆虛擬機1.16 Linux機器相互登錄當然假如你的操作系統忘記密碼了，怎麽辦呢？當然肯定有解決的辦法在這裏提一下關機命令

C#多線程學習(四) 多線程的自動管理(線程池)

lock ini hash tar 並且 incr 沒有 amp bool 在多線程的程序中，經常會出現兩種情況：一種情況：應用程序中，線程把大部分的時間花費在等待狀態，等待某個事件發生，然後才能給予響應這一般使用ThreadP

JVM學習--(四)垃圾回收算法

解決 cat 也會成本高內存空間技術分享減少圖片改變我們都知道java語言與C語言最大的區別就是內存自動回收，那麽JVM是怎麽控制內存回收的，這篇文章將介紹JVM垃圾回收的幾種算法，從而了解內存回收的基本原理。 stop the world 在介紹垃圾

React 學習(四) ---- 生命周期函數

truct upd 進入 console tel 做什麽區分寫到 his 　　現在我們能修改狀態，頁面可以進行交互了，但是還有一種狀態改變沒有解決，那就是倒計時效果，時間一直在變化，組件狀態也一直在改變，但我們什麽都沒有做，如果要實現這樣的效果，需要怎麽處理？我們都知

vue2.0學習(四)-實例和內置組件

red jsp methods emit 屬性 function AS button 組件 vue2.0學習(四)-實例和內置組件 1.實例入門-實例屬性一、Vue和Jquery.js一起使用下載可以去官網進行下載，我這裏使用的版本是3.1.1，下載好後在需要的頁面引入

學習四十

linux學習4月17日任務11.25 配置防盜鏈11.26 訪問控制Directory11.27 訪問控制FilesMatch擴展幾種限制ip的方法 http://ask.apelearn.com/question/6519apache 自定義header http://ask.apelearn.com/q

vuex學習四----getters

相關推薦