getters

相當於元件中的計算屬性,用於計算state中的資料返回計算後的值的
函式的第一個引數是 state 第二個引數是 getters可以通過這個呼叫getters中的其他函式
如果想要傳遞引數 那麼需要使用閉包
return funcation(引數)

定義getters

import Vue from 'vue'
// 匯入vuex
import Vuex from 'vuex'

// 通過vue安裝vuex
Vue.use(Vuex)

/**
 * 建立store
 * @type {Store<{counter: number}>}
 */
const store = new
 
 Vuex.Store({
  // 用於定義屬性
  state:{
    counter:1000
  },
  // 定義用於修改屬性的函式
  mutations:{
    // 第一個引數是 state
    modifyCounter(state){
      state.counter--;
    }
  },
  // 計算屬性也就是getters 用於獲取
  getters:{
    // 獲取平方
    getCountPF(state) {
      return state.counter * state.counter;
    },
    // 獲取 平方的2分之一
    getCountTwoOne(state, getters) {
      
 
return getters.getCountPF / 2;
    },
    // 獲取 平方的n分之一 引數傳遞
    getCountN(state,getters){
      return function (n){
        return getters.getCountPF / n;
      }
    }
  }
})

export default store

呼叫
<template>
  <div id="app">
    <h2>訪問store</h2>
    <h3>{{$store.state.counter}}</h3>
<!--    通過commit傳入方法呼叫-->
    <button @click="$store.commit('modifyCounter')">-</button>
    <h2>獲取Counter的平方</h2>
    <h2>{{$store.getters.getCountPF}}</h2>
    <h2>獲取Counter的平方 2/1</h2>
    <h2>{{$store.getters.getCountTwoOne}}</h2>
    <h2>獲取Counter的平方 n/1</h2>
    <h2>{{$store.getters.getCountN(5)}}</h2>
  </div>
</template>

<script>
import
 
 TabBar from "./components/tabbar/TabBar";
export default {
  name: 'App',
  components:{
    TabBar
  }
}
</script>

<style>
@import "./assets/css/base.css";
</style>

響應式修改物件狀態

Vue.set(物件|陣列,key|index,value)

響應式刪除物件欄位

Vue.delete(物件|陣列,key|index)

作者：彼岸舞

時間：2021\06\28

內容關於：VUE

本文屬於作者原創,未經允許,禁止轉發