第七节：Vue3 开发 WordPress 设置选项 - 对象存值（优化）

简化存值方法，优化赋值逻辑，进一步降低开发中的心智负担，并给出了详细的示例代码和开源的实战运用项目供各位参考。

最后更新于 2025-06-06

本页目录7 节

书接上文，建议您从头阅读，单独阅读本章，会比较难懂。

在之前的保存设置选项的方法中，我们采用了循环保存的方法，将对象中的每一个键值对的键名作为选项名，键值作为选项值，通过这一点，我们可以精细化的管理每一个选项。但是，也有不少麻烦。

在 JS 中撰写获取数据的时候，需要一些大量重复的工作，例如这样，每个选项都需要单独传值作选项的默认值。

1
//使用Axios获取选项值后，将拿到的值传给对象中的各个键值对作默认值
2
 const responseData = response.data;
3
  // 使用解构语法来获取响应数据对象中的属性，并为每个属性提供默认值以避免未定义的属性
4

5
      const {
6
        zfb: {
7
        npc_zfb_appid: zfbAppid = '',
8
        npc_zfb_private_key: zfbPrivateKey = '',
9
        npc_zfb_public_key: zfbPublicKey = ''
10
        } = {},
11
        //……
12

13
      } = responseData;
14

15
      datas.npc_refund_user = npc_refund_user;
16
      //……

可以看到，一旦选项多起来，我们将会做非常多的重复工作

再就是，如果我们保存类似这样的数据

1
link: [
2
          {
3
            title: "",
4
            url: "",
5
          },
6
        ],

需要做额外的处理，进一步添加了心智负担（我已经失去 2 根亲密的朋友了😔）

而且，我们也看到，后端的获取选项接口和保存选项接口，也是比较复杂的，

真正的好代码，应该是一眼就能看懂的。

为解决以上问题，进行本次优化。

逻辑图

原来，我们是循环保存每一个选项的值，现在，我们只循环一次，通过对象存储选项数据。

之前是数据结构是这样的

1
const configData = reactive({
2
    npc_refund_config: {
3
      zfb: {
4
        appid: "",
5
        private_key: "",
6
        public_key: "",
7
      },
8
    },
9
     });

老办法，我们会有 3 个选项，

但我们改变思路，只保存一个选项 - npc_refund_config,设置的值通过对象进行存储。在页面的开始时获取数据，我们将拿到的对象直接赋值即可，减少了各种取值、给默认值等操作，大大节约了精力。

修改接口

改造下原来的接口

1
//读取Option
2
        public static function get_option_by_RestAPI($data)
3
        {
4
            // 将输入数据转换成数组类型
5
            $dataArray = json_decode($data->get_body(), true);
6
            $return = array();
7
            // 遍历数组，检查每个元素是否为对象
8
            foreach ($dataArray as $option_name => $value) {
9

10
                // 如果当前元素非数组或数组为空，获取指定选项的值
11
                $return[$option_name] = get_option($option_name, "");
12
            }
13
            return $return; // 返回所有选项的键值对
14
        }
15

16

17
        //保存Option
18
        public static function update_option_by_RestAPI($data)
19
        {
20
            // 判断是否是管理员
21
            if (!current_user_can('manage_options')) {
22
                // 返回失败信息
23
                return new WP_Error('save_error', '保存失败！非管理员无法保存', array('status' => 500));
24
            }
25

26
            //获取传来的值
27
            $dataArray = json_decode($data->get_body());
28

29
            //准备数组，存储数据
30
            $result = [];
31

32
            //循环保存选项
33
            foreach ($dataArray as $option_name => $value) {
34
                update_option($option_name, $value);
35
                $result[$option_name] = $value;
36
            }
37

38
            //返回成功信息
39
            return new WP_REST_Response(array(
40
                'success' => true,
41
                'message' => "已保存！",
42
                'data' => $result,
43
            ), 200);
44
        }

与之前基本一致，但只循环一次保存数据。

修改传值逻辑

在获取选项并赋值到 JS 内部，就简化多了，直接对象赋值即可，但注意，需要保持对象的结构一致。

1
//保存数据
2
  const configData = reactive({
3
    //选项值
4
    npc_refund_config: {
5
      zfb: {
6
        appid: "",
7
        private_key: "",
8
        public_key: "",
9
      },
10
    },
11
  });
12

13
  //获取数据
14
  const getData = async () => {
15
    try {
16
      const response = await axios.post(
17
        `${dataLocal.route}pf/v1/get_option`,
18
        configData,
19
        {
20
          headers: {
21
            "X-WP-Nonce": dataLocal.nonce,
22
            "Content-Type": "application/json",
23
          },
24
        }
25
      );
26
      //拿到需要的值
27
      const axiosData = response.data.npc_refund_config;
28

29
      //拿到值了才赋值，拿到空值就用默认值
30
      if (axiosData) {
31
        configData.npc_refund_config = axiosData;
32
      }
33
    } catch (error) {
34
      window.alert("连接服务器失败或后台读取出错！数据读取失败");
35
      console.log(error);
36
    }
37
  };

开发中取值

此方法简化了 JS 中的操作逻辑，但为了确保数据的安全性，在开发中需要对获取选项的值进行一些额外处理。

1
/**
2
   * 从对象中提供全局设置
3
   */
4
  public static function npcConfig($option)
5
  {
6
    $config = get_option("npc_refund_config", '没有拿到值npc_refund_config');
7
    $value =  self::get_options($config, $option);
8
    return $value;
9
  }
10

11
  /**
12
   * 从对象中获取属性值
13
   *
14
   * @param object $config 对象
15
   * @param string $property 从对象中获取的属性名
16
   * @param string $defaultValue 默认值（可选）
17
   * @return mixed 属性值或默认值
18
   */
19
  public static function get_options($config, $property, $defaultValue = '')
20
  {
21
    /**
22
     * 是否是对象
23
     * 对象中是否有此键名
24
     * 在对象中的此值是否为空
25
     */
26
    if (is_object($config) && property_exists($config, $property) && !empty($config->$property)) {
27
      return $config->$property;
28
    } else {
29
      return $defaultValue;
30
    }
31
  }

使用

1
//选项值
2
 $config = Mare_Admin::npcConfig('wx');
3
  // 商户号; // 获取传递的商家ID
4
 $mchid =   Mare_Admin::get_options($config, 'mch_id');

补充 - 组件中使用

Axios 的情况下，在组件中拿到选项值，可参考以下方法。

1
<script setup lang="ts">
2
//支付宝输入框
3
import { computed } from "vue";
4
import { mainStore } from "../store/store.js";
5
//实例化
6
const store = mainStore();
7
//通过计算属性拿到最新值
8
const form = computed(() => store.configData.npc_refund_config.zfb);
9
</script>
10

11
<template>
12
  <el-form :model="form" label-width="100px">
13
    <el-form-item label="APP ID：">
14
      <el-col :xs="24" :span="12">
15
        <el-input v-model="form.appid" placeholder="APP ID" clearable />
16
        <el-text class="mx-1" type="info">支付宝中的APP ID</el-text>
17
      </el-col>
18
    </el-form-item>
19
<!--省略-->
20
  </el-form>
21
</template>
22
<style scoped></style>

总结

此方法是通过接口，方便的获取选项值的方法，此方法我已用在下列开源项目中，

magick-refund

各位可查阅原代码，观察用法。

若您感觉稍有难度，还请耐心等待，更简单的方法将于近期推出，进一步降低难度。

阅读偏好

工具

第七节：Vue3 开发 WordPress 设置选项 - 对象存值（优化）

逻辑图

修改接口

修改传值逻辑

开发中取值

补充 - 组件中使用

总结

最新文章

搜索