欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript學(xué)習(xí)筆記之取值函數(shù)getter與取值函數(shù)setter詳解

 更新時(shí)間:2022年08月22日 15:12:02   作者:白嫖leader  
這篇文章主要介紹了JavaScript取值函數(shù)getter與取值函數(shù)setter,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

首先,我們先看一段恩簡單的代碼:

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

相信大家一眼就看出來了,控制臺(tái)打印的結(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ù)了。

當(dāng)你明白了get與set函數(shù)的使用后,肯定會(huì)想上面第一段代碼那么簡單,誰會(huì)去用第二段代碼,又多又不好理解,我只想說,你想的太簡單了,哈哈哈~~~~

接著看:

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

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

  • 在讀取或者設(shè)置對象的某一個(gè)屬性的時(shí)候,可以進(jìn)行攔截,中間可以進(jìn)行其他的操作,比如處理一些業(yè)務(wù)邏輯
  • 在vuex中對state中的數(shù)據(jù)進(jìn)行緩存
  • 可以裝bei(在小白面前)

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

對于做過vue項(xiàng)目的同學(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,
})

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

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

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

但是有一個(gè)很重要的一點(diǎn),刷新頁面后usertoken就變成空了,為了解決這個(gè)問題,就必須使用本地存儲(chǔ),那么本地存儲(chǔ)應(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
})

到此這篇關(guān)于JavaScript學(xué)習(xí)筆記之取值函數(shù)getter與取值函數(shù)setter詳解的文章就介紹到這了,更多相關(guān)JS getter與setter內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論