簡化存值方法，優化賦值邏輯，進一步降低開發中的心智負擔，并給出了詳細的示例代碼和開源的實戰運用項目供各位參考。
書接上文，建議您從頭閱讀，單獨閱讀本章，會比較難懂。
在之前的保存設置選項的方法中，我們采用了循環保存的方法，將對象中的每一個鍵值對的鍵名作為選項名，鍵值作為選項值，通過這一點，我們可以精細化的管理每一個選項。但是，也有不少麻煩。
在 JS 中撰寫獲取數據的時候，需要一些大量重復的工作，例如這樣，每個選項都需要單獨傳值作選項的默認值。
//使用Axios獲取選項值后，將拿到的值傳給對象中的各個鍵值對作默認值
const responseData = response.data;
// 使用解構語法來獲取響應數據對象中的屬性，并為每個屬性提供默認值以避免未定義的屬性
const {
zfb: {
npc_zfb_appid: zfbAppid = '',
npc_zfb_private_key: zfbPrivateKey = '',
npc_zfb_public_key: zfbPublicKey = ''
} = {},
//……
} = responseData;
datas.npc_refund_user = npc_refund_user;
//……
可以看到，一旦選項多起來，我們將會做非常多的重復工作
再就是，如果我們保存類似這樣的數據
link: [
{
title: "",
url: "",
},
],
需要做額外的處理，進一步添加了心智負擔（我已經失去2根親密的朋友了??）
而且，我們也看到，后端的獲取選項接口和保存選項接口，也是比較復雜的，
真正的好代碼，應該是一眼就能看懂的。
為解決以上問題，進行本次優化。
邏輯圖
原來，我們是循環保存每一個選項的值，現在，我們只循環一次，通過對象存儲選項數據。
之前是數據結構是這樣的
const configData = reactive({
npc_refund_config: {
zfb: {
appid: "",
private_key: "",
public_key: "",
},
},
});
老辦法，我們會有3個選項，
但我們改變思路，只保存一個選項 – npc_refund_config,設置的值通過對象進行存儲。在頁面的開始時獲取數據，我們將拿到的對象直接賦值即可，減少了各種取值、給默認值等操作，大大節約了精力。
修改接口
改造下原來的接口
//讀取Option
public static function get_option_by_RestAPI($data)
{
// 將輸入數據轉換成數組類型
$dataArray = json_decode($data->get_body(), true);
$return = array();
// 遍歷數組，檢查每個元素是否為對象
foreach ($dataArray as $option_name => $value) {
// 如果當前元素非數組或數組為空，獲取指定選項的值
$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());
//準備數組，存儲數據
$result = [];
//循環保存選項
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);
}
與之前基本一致，但只循環一次保存數據。
修改傳值邏輯
在獲取選項并賦值到 JS 內部，就簡化多了，直接對象賦值即可，但注意，需要保持對象的結構一致。
//保存數據
const configData = reactive({
//選項值
npc_refund_config: {
zfb: {
appid: "",
private_key: "",
public_key: "",
},
},
});
//獲取數據
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;
//拿到值了才賦值，拿到空值就用默認值
if (axiosData) {
configData.npc_refund_config = axiosData;
}
} catch (error) {
window.alert("連接服務器失敗或后臺讀取出錯！數據讀取失敗");
console.log(error);
}
};
開發中取值
此方法簡化了JS中的操作邏輯，但為了確保數據的安全性，在開發中需要對獲取選項的值進行一些額外處理。
/**
* 從對象中提供全局設置
*/
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 默認值（可選）
* @return mixed 屬性值或默認值
*/
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');
補充 – 組件中使用
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>
總結
此方法是通過接口，方便的獲取選項值的方法，此方法我已用在下列開源項目中，
各位可查閱原代碼，觀察用法。
若您感覺稍有難度，還請耐心等待，更簡單的方法將于近期推出，進一步降低難度。
最新文章
- 后續文章不定期撰寫中，點個關注，獲取平臺最新文章推送。
- 技術有限，還望諸位協助勘誤，于評論區指出，
- 常一文多發，最新勘定和增補文章于下方鏈接給出
- m.kartiktrivedi.com/277478.html
