getter這個概念其實我們寫的時候感覺好像和Mutations修改狀態一樣，實際上它們是有區別的：

公司主營業務：網站制作、網站設計、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳，提高企業的競爭能力。創新互聯建站是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創新互聯建站推出舟曲免費做網站回饋大家。

getters比較死板，如果你的百度錢包只有在金額為100才能提現，那么你在寫提現頁面，它是早已固定好的，而Mutation不一樣，當你點擊百度錢包提現，你哪怕是一元，它只要你點擊了便可以提現，而且getters它是不需要什么點擊，它就存在，只要你寫了，這是什么意思，就是說假設你百度錢包為0，你存在了getter它就有100元，而你如果寫許多百度經驗，百度再次發紅包0.5元時它就是100+0.5+100

下面我具體介紹它的用法

第一步在store.js里用const聲明我們的getters屬性

代碼如下：

const getters={

num:function(state){

return state.num+=100;

}

}

注:如果讀者不知道store.js就是我們寫vuex共用的js

第二步在Vuex.Store()里引入getter

代碼如下:

export default new Vuex.Store({

state,

mutations,

getters,/*只關注此欄*/

actions

})

第三步在你自己創建的組件例如a.vue中computed里面進行配置

<script>

  import store from '@/store'

  import {mapState,mapMutations} from 'vuex'

  export default{

    data(){

      return{

      

      }

    },

  

  computed:{

   

   /*只關注此欄這里面采用es6的拓展運算符*/

   ...mapState(["num"]),

   num(){

   return this.$store.getters.num;

   }

   

   },

    

    

    store

    

  }

    

</script>

注：如果你不了解es6的運算符也沒關系，你只要知道在里面無論你寫多少state變量都沒關系即可，包括getter的方法等等，再次要注意return一定要寫否則報錯。

第四步在你自己創建的模板中引入測試代碼

代碼如下：

<div>

{{num}}

</div>

你看一下num為多少？

注：

store.js補充部分:

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state={//狀態對象

num:0,

},

const getters={

age:function(state){

return state.num+=100;

},

export default new Vuex.Store({

state,

mutations,

getters,

actions

})

注:如果你看到了100,那就說明你成功，然后你在你自己創建的模板中試一試加一個button點擊事件再次觀察結果看看

代碼補充部分如下：

1）在store.js中添加如下代碼

const mutations={//觸發狀態

jia(state){

state.num+=0.5

},

}

2）在你自己的組件a.vue中添加如下代碼

模板部分：

<div>

{{num}}

</div>

<button @click="jia">+</button>

</div>

script部分：

methods:mapMutations([

    

    'jia',

    ]),

觀察結果如果為200.5則成功。

以上這篇對vuex中getters計算過濾操作詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持創新互聯。

分享文章：對vuex中getters計算過濾操作詳解
文章路徑：http://m.newbst.com/article34/jesepe.html

成都網站建設公司_創新互聯，為您提供網站改版、網站策劃、商城網站、企業網站制作、小程序開發、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯