vuex前端開發(fā),getters是什么？怎么調(diào)用？簡單的案例操作！

下面通過一些簡單的案例，來了解一下，vuex當(dāng)中的getters到底是什么意思，有哪些實際的操作案例。

Vuex的getters主要用于對store中的state進行計算或過濾，類似于Vue組件中的計算屬性。它可以對state進行一些處理，然后返回一個新的值，供組件使用。

使用getters的好處有：

1. 可以將一些常用的計算邏輯封裝在getters中，避免在多個組件中重復(fù)編寫相同的計算代碼。
2. getters可以緩存計算結(jié)果，只有當(dāng)依賴的state發(fā)生變化時，才會重新計算，提高性能。
3. getters可以接收其他getters作為參數(shù)，可以實現(xiàn)對多個狀態(tài)的聯(lián)合計算

// 在store/index.js中定義getters
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Build an app', done: false },
      { id: 3, text: 'Deploy to production', done: false }
    ]
  },
  getters: {
    // 計算未完成的任務(wù)數(shù)量
    unfinishedCount: state => {
      return state.todos.filter(todo => !todo.done).length;
    },
    // 獲取所有已完成的任務(wù)
    completedTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});

// 在組件中使用getters
export default {
  computed: {
    unfinishedCount() {
      return this.$store.getters.unfinishedCount;
    },
    completedTodos() {
      return this.$store.getters.completedTodos;
    }
  }
}

下面給大家看看我個人在本地測試的實際項目案例代碼。

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import {createStore} from 'vuex'
const store =createStore({
    state(){
        return {
            count:1,
            str:'我是來自VUEX的',
            todos:[
                {id:1,text:'Learn Vue',done:true},
                {id:2,text:'Build an app',done:false},
                {id:3,text:'Deploy to production',done:false},
                {id:4,text:'write an website',done:true}
            ]
        }
    },
    getters:{
        //計算未完成的任務(wù)數(shù)量
        unfinishedCount: state => {
            return state.todos.filter(todo => !todo.done).length;
        },
        //獲取所有已完成的任務(wù)
        completedTodos: state => {
            return state.todos.filter(todo => todo.done).length;
        }
    }

})


createApp(App).use(store).mount('#app')

這個代碼是來自main.js。里面我配置了一下store的基礎(chǔ)數(shù)據(jù)情況。

里面有一個state,共享了一個數(shù)組。

還有一個getters屬性，里面對外暴漏了2個函數(shù)。分別是統(tǒng)計未完成的任務(wù)數(shù)量，和已經(jīng)完成的任務(wù)數(shù)量。

<template>
    <h3>todos-getters練習(xí)</h3>
    <p>未完成 的任務(wù)數(shù):{{ unfinishedCount }}</p>
    <p>已完成的任務(wù)數(shù):{{ completedTodos  }}</p>
</template>
<script>
    export default{
        data(){
            return{
                
            }
        },
        computed:{
           
         unfinishedCount(){
            return this.$store.getters.unfinishedCount;
         },
         completedTodos(){
            return this.$store.getters.completedTodos;
         }
    
        }
    }
</script>

這個我單獨定義了一個組件，名字是Todos.vue。里面可以看見有計算屬性。通過計算屬性，可以調(diào)用到store里面的getters函數(shù)。這樣用起來就會很方便了。

畢竟，getters誕生的本意，就是以為了讓人們快速方便的操作共享數(shù)據(jù)的。

計算屬性本身就是一個函數(shù)，只是它做了封裝。使得一些較為復(fù)雜的數(shù)據(jù)邏輯計算，被封裝成了一個函數(shù)的形式，對外調(diào)用的時候，也就顯得較為簡化了。如圖，直接使用vue的插值運算符，就能調(diào)用計算屬性了。這個就是計算屬性的優(yōu)勢和便捷。

<template>
  <h3>vuex的基礎(chǔ)使用</h3>
  <!-- <p>{{ $store.state.str }}</p> -->
  <Addtion />
  <Subtract />
  <Todos />
</template>
<script>
import Addtion from './components/Addtion.vue'
import Subtract from './components/Subtract.vue';
import Todos from './components/Todos.vue';
  export default{
    components:{
      Addtion,
      Subtract,
      Todos
    },
    data(){
      return{
        
      }
    }
    
  }
</script>

這個是入口文件app.vue的內(nèi)容。我已經(jīng)在app里面做了注冊?？梢宰尳M件todos.vue正常顯示。

如圖，可以看見，正確了獲得了，已經(jīng)完成 的任務(wù)數(shù)量，和未完成的任務(wù)數(shù)量。

計算出來對結(jié)果是正確的。2個true,2個false.文章來源地址http://www.zghlxwxcb.cn/news/detail-803009.html

到了這里，關(guān)于vuex前端開發(fā),getters是什么？怎么調(diào)用？簡單的案例操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！