書接上文，建議您從頭閱讀，單獨(dú)閱讀本章，會比較難懂。
在之前的保存設(shè)置選項的方法中，我們采用了循環(huán)保存的方法，將對象中的每一個鍵值對的鍵名作為選項名，鍵值作為選項值，通過這一點(diǎn)，我們可以精細(xì)化的管理每一個選項。但是，也有不少麻煩。
在 JS 中撰寫獲取數(shù)據(jù)的時候，需要一些大量重復(fù)的工作，例如這樣，每個選項都需要單獨(dú)傳值作選項的默認(rèn)值。
//使用Axios獲取選項值后，將拿到的值傳給對象中的各個鍵值對作默認(rèn)值
const responseData = response.data;
// 使用解構(gòu)語法來獲取響應(yīng)數(shù)據(jù)對象中的屬性，并為每個屬性提供默認(rèn)值以避免未定義的屬性
const {
zfb: {
npc_zfb_appid: zfbAppid = '',
npc_zfb_private_key: zfbPrivateKey = '',
npc_zfb_public_key: zfbPublicKey = ''
} = {},
//……
} = responseData;
datas.npc_refund_user = npc_refund_user;
//……
可以看到，一旦選項多起來，我們將會做非常多的重復(fù)工作
再就是，如果我們保存類似這樣的數(shù)據(jù)
link: [
{
title: "",
url: "",
},
],
需要做額外的處理，進(jìn)一步添加了心智負(fù)擔(dān)（我已經(jīng)失去2根親密的朋友了??）
而且，我們也看到，后端的獲取選項接口和保存選項接口，也是比較復(fù)雜的，
真正的好代碼，應(yīng)該是一眼就能看懂的。
為解決以上問題，進(jìn)行本次優(yōu)化。
邏輯圖
原來，我們是循環(huán)保存每一個選項的值，現(xiàn)在，我們只循環(huán)一次，通過對象存儲選項數(shù)據(jù)。
之前是數(shù)據(jù)結(jié)構(gòu)是這樣的
const configData = reactive({
npc_refund_config: {
zfb: {
appid: "",
private_key: "",
public_key: "",
},
},
});
老辦法，我們會有3個選項，
但我們改變思路，只保存一個選項 – npc_refund_config,設(shè)置的值通過對象進(jìn)行存儲。在頁面的開始時獲取數(shù)據(jù)，我們將拿到的對象直接賦值即可，減少了各種取值、給默認(rèn)值等操作，大大節(jié)約了精力。
修改接口
改造下原來的接口
//讀取Option
public static function get_option_by_RestAPI($data)
{
// 將輸入數(shù)據(jù)轉(zhuǎn)換成數(shù)組類型
$dataArray = json_decode($data->get_body(), true);
$return = array();
// 遍歷數(shù)組，檢查每個元素是否為對象
foreach ($dataArray as $option_name => $value) {
// 如果當(dāng)前元素非數(shù)組或數(shù)組為空，獲取指定選項的值
$return[$option_name] = get_option($option_name, "");
}
return $return; // 返回所有選項的鍵值對
}
//保存Option
public static function update_option_by_RestAPI($data)
{
// 判斷是否是管理員
if (!current_user_can('manage_options')) {
// 返回失敗信息
return new WP_Error('save_error', '保存失敗！非管理員無法保存', array('status' => 500));
}
//獲取傳來的值
$dataArray = json_decode($data->get_body());
//準(zhǔn)備數(shù)組，存儲數(shù)據(jù)
$result = [];
//循環(huán)保存選項
foreach ($dataArray as $option_name => $value) {
update_option($option_name, $value);
$result[$option_name] = $value;
}
//返回成功信息
return new WP_REST_Response(array(
'success' => true,
'message' => "已保存！",
'data' => $result,
), 200);
}
與之前基本一致，但只循環(huán)一次保存數(shù)據(jù)。
修改傳值邏輯
在獲取選項并賦值到 JS 內(nèi)部，就簡化多了，直接對象賦值即可，但注意，需要保持對象的結(jié)構(gòu)一致。
//保存數(shù)據(jù)
const configData = reactive({
//選項值
npc_refund_config: {
zfb: {
appid: "",
private_key: "",
public_key: "",
},
},
});
//獲取數(shù)據(jù)
const getData = async () => {
try {
const response = await axios.post(
`${dataLocal.route}pf/v1/get_option`,
configData,
{
headers: {
"X-WP-Nonce": dataLocal.nonce,
"Content-Type": "application/json",
},
}
);
//拿到需要的值
const axiosData = response.data.npc_refund_config;
//拿到值了才賦值，拿到空值就用默認(rèn)值
if (axiosData) {
configData.npc_refund_config = axiosData;
}
} catch (error) {
window.alert("連接服務(wù)器失敗或后臺讀取出錯！數(shù)據(jù)讀取失敗");
console.log(error);
}
};
開發(fā)中取值
此方法簡化了JS中的操作邏輯，但為了確保數(shù)據(jù)的安全性，在開發(fā)中需要對獲取選項的值進(jìn)行一些額外處理。
/**
* 從對象中提供全局設(shè)置
*/
public static function npcConfig($option)
{
$config = get_option("npc_refund_config", '沒有拿到值npc_refund_config');
$value = self::get_options($config, $option);
return $value;
}
/**
* 從對象中獲取屬性值
*
* @param object $config 對象
* @param string $property 從對象中獲取的屬性名
* @param string $defaultValue 默認(rèn)值（可選）
* @return mixed 屬性值或默認(rèn)值
*/
public static function get_options($config, $property, $defaultValue = '')
{
/**
* 是否是對象
* 對象中是否有此鍵名
* 在對象中的此值是否為空
*/
if (is_object($config) && property_exists($config, $property) && !empty($config->$property)) {
return $config->$property;
} else {
return $defaultValue;
}
}
使用
//選項值
$config = Mare_Admin::npcConfig('wx');
// 商戶號; // 獲取傳遞的商家ID
$mchid = Mare_Admin::get_options($config, 'mch_id');
補(bǔ)充 – 組件中使用
Axios的情況下，在組件中拿到選項值，可參考以下方法。
<script setup lang="ts">
//支付寶輸入框
import { computed } from "vue";
import { mainStore } from "../store/store.js";
//實例化
const store = mainStore();
//通過計算屬性拿到最新值
const form = computed(() => store.configData.npc_refund_config.zfb);
</script>
<template>
<el-form :model="form" label-width="100px">
<el-form-item label="APP ID：">
<el-col :xs="24" :span="12">
<el-input v-model="form.appid" placeholder="APP ID" clearable />
<el-text class="mx-1" type="info">支付寶中的APP ID</el-text>
</el-col>
</el-form-item>
<!--省略-->
</el-form>
</template>
<style scoped></style>
總結(jié)
此方法是通過接口，方便的獲取選項值的方法，此方法我已用在下列開源項目中，
各位可查閱原代碼，觀察用法。
若您感覺稍有難度，還請耐心等待，更簡單的方法將于近期推出，進(jìn)一步降低難度。
最新文章
- 后續(xù)文章不定期撰寫中，點(diǎn)個關(guān)注，獲取平臺最新文章推送。
- 技術(shù)有限，還望諸位協(xié)助勘誤，于評論區(qū)指出，
- 常一文多發(fā)，最新勘定和增補(bǔ)文章于下方鏈接給出
- www.kartiktrivedi.com/277478.html
