JavaScript取值函數(shù)getter與存值函數(shù)setter怎么使用

本篇內(nèi)容介紹了“JavaScript取值函數(shù)getter與存值函數(shù)setter怎么使用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

取值函數(shù)getter和存值函數(shù)setter

get和set是兩個關(guān)鍵字，用于對某個屬性設(shè)置存值函數(shù)和取值函數(shù)，攔截該屬性的存取行為。

那么，這兩個東西要怎么用呢？而且他們和我們的平日里寫的業(yè)務(wù)又是怎么練習(xí)起來的呢？

首先，我們先看一段恩簡單的代碼：

   var person={
        myname:''
    }
   person.myname='lsh'
   console.log(person.myname);

相信大家一眼就看出來了，控制臺打印的結(jié)果是lsh，那么如果我們把它改寫成取值函數(shù)和存執(zhí)函數(shù)要怎么寫呢？

代碼如下：

      var name = ""
      var person = {
        get myname() {
          console.log("我叫" + name)
          return name
        },
        set myname(val) {
          console.log("我叫" + name)
          name = val
        },
      }
      person.myname = "lsh"
      console.log(person.myname)

我們只需要使用對象.函數(shù)名就可以調(diào)用取值函數(shù)和取值函數(shù)了。

使用get與set函數(shù)有兩個好處

使用get與set函數(shù)有兩個好處：

• 在讀取或者設(shè)置對象的某一個屬性的時候，可以進行攔截，中間可以進行其他的操作，比如處理一些業(yè)務(wù)邏輯

• 在vuex中對state中的數(shù)據(jù)進行緩存

• 可以裝bei(在小白面前)

對于第一個好處上面已經(jīng)演示過了，這里要解釋一下第二個好處：

對于做過vue項目的同學(xué)，或許在store文件夾下的index.js文件中見過下面的代碼，下面的代碼中就用到了get與set函數(shù)

export default new Vuex.Store({
  state: {
    get UserToken() {
      return localStorage.getItem("token")
    },
    set UserToken(value) {
      localStorage.setItem("token", value)
    },
  },
  mutations: {
    LOGIN_IN(state, token) {
      state.UserToken = token
    },
    LOGIN_OUT(state) {
      state.UserToken = ""
    },
  },
  modules,
})

這個東西出現(xiàn)在vuex中，vuex就是進行數(shù)據(jù)的集中式處理，可以是的數(shù)據(jù)進行全局訪問的，那么為什么又要用到localstorage呢，那么又為什么要用get和set方法呢？

首先我們要明確一點在vuex中使用本地存儲，目的并不是實現(xiàn)數(shù)據(jù)的共享(store已經(jīng)實現(xiàn)了全局共享)，而是實現(xiàn)vuex所管理的數(shù)據(jù)進行本地存儲(眾所周知，vuex存儲的數(shù)據(jù)刷新頁面后數(shù)據(jù)會丟失)。

如果我們將mutations的值些寫為一個下面的這個樣子，也是可以實現(xiàn)數(shù)據(jù)在全局的共性，一點也不耽誤操作它：

但是有一個很重要的一點，刷新頁面后usertoken就變成空了，為了解決這個問題，就必須使用本地存儲，那么本地存儲應(yīng)該如何與vuex相結(jié)合起來呢，那就必須要用到下面的寫法了，然后就用到了get與set函數(shù)了。

export default {
    get UserToken(){
        return localStorage.getItem('token');
    },
    set UserToken(value){
        localStorage.setItem('token',value)
    }
}

然后就完美解決問題了。

最后代碼就變成了這樣子：

import Vue from 'vue'
import Vuex from 'vuex'
import state from "./defaultState"
import mutations from "./mutations"
import modules from "./modules"
Vue.use(Vuex)
export default new Vuex.Store({
    state,
    mutations,
    modules
})

“JavaScript取值函數(shù)getter與存值函數(shù)setter怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！