tmui-cli 5.3.1 → 5.3.2

package/data/uniappx/uts/buildin-object-api/array.md

@@ -392,28 +392,6 @@ find() 方法返回数组中满足提供的测试函数的第一个元素的值
 | :- | :- | :- |
 | √ | √ | √ |
 
-### find(predicate, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const array3: number[] = [5, 12, 8, 130, 44];
-      const found2 = array3.find((element: number, index: number): boolean => element < 5);
-      console.log(found2) // null
-```
-
-### find(predicate, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[] = [5, 12, 8, 130, 44];
-      const found1 = array1.find((element: number): boolean => element > 10);
-      console.log(found1) //12
-```
-
 ### findIndex(predicate, thisArg?)
 
 findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
@@ -459,46 +437,6 @@ findIndex() 方法返回数组中满足提供的测试函数的第一个元素
 | :- | :- | :- |
 | √ | √ | √ |
 
-### findIndex(predicate, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[] = [5, 12, 8, 130, 44];
-      let isLargeNumber = (element: number, index: number): boolean => element > 13;
-      console.log(isLargeNumber)//3
-
-      const array2: number[] = [10, 11, 12];
-      console.log(array2.findIndex(isLargeNumber))//3
-
-      const array3: number[] = [1, 2, 3];
-      array3.findIndex((element: number, index: number, array: number[]): boolean => {
-        console.log(array[index]) //1=>2=>3
-        return true;
-      })
-```
-
-### findIndex(predicate, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[] = [5, 12, 8, 130, 44];
-      let isLargeNumber = (element: number, index: number): boolean => element > 13;
-      console.log(isLargeNumber)//3
-
-      const array2: number[] = [10, 11, 12];
-      console.log(array2.findIndex(isLargeNumber))//3
-
-      const array3: number[] = [1, 2, 3];
-      array3.findIndex((element: number, index: number, array: number[]): boolean => {
-        console.log(array[index]) //1=>2=>3
-        return true;
-      })
-```
-
 ### fill(value, start?, end?)
 
 fill() 方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为 array.length）内的全部元素。它返回修改后的数组。
@@ -1198,48 +1136,6 @@ every() 方法测试一个数组内的所有元素是否都能通过指定函数
 | :- | :- | :- |
 | √ | √ | √ |
 
-### every(predicate, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const isBelowThreshold = (currentValue: number): boolean => currentValue < 40;
-      const array1: number[] = [1, 30, 39, 29, 10, 13];
-      console.log(array1.every(isBelowThreshold));// true
-
-      const array2: number[] = [1, 30, 39, 29, 10, 13, 41];
-      console.log(array2.every(isBelowThreshold));// false
-
-      const array3: number[] = [1, 2, 3];
-      array3.every((element: number, index: number, array: number[]): boolean => {
-        console.log(array[index])//1=>2->3
-        return true;
-      })
-
-```
-
-### every(predicate, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const isBelowThreshold = (currentValue: number): boolean => currentValue < 40;
-      const array1: number[] = [1, 30, 39, 29, 10, 13];
-      console.log(array1.every(isBelowThreshold));// true
-
-      const array2: number[] = [1, 30, 39, 29, 10, 13, 41];
-      console.log(array2.every(isBelowThreshold));// false
-
-      const array3: number[] = [1, 2, 3];
-      array3.every((element: number, index: number, array: number[]): boolean => {
-        console.log(array[index])//1=>2->3
-        return true;
-      })
-
-```
-
 ### some(predicate, thisArg?)
 
 some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。
@@ -1276,10 +1172,6 @@ some() 方法测试数组中是否至少有一个元素通过了由提供的函
 | :- | :- | :- |
 | √ | √ | √ |
 
-### some(predicate, thisArg?)
-
-### some(predicate, thisArg?)
-
 ### forEach(callbackfn, thisArg?)
 
 forEach() 方法对数组的每个元素执行一次给定的函数。
@@ -1348,44 +1240,6 @@ forEach() 方法对数组的每个元素执行一次给定的函数。
 | :- | :- | :- |
 | √ | √ | √ |
 
-### forEach(callbackfn, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const array1: string[] = ['a', 'b', 'c'];
-      array1.forEach(element => {console.log(element)});
-      // expected output: "a"
-      // expected output: "b"
-      // expected output: "c"
-      const items: string[] = ['item1', 'item2', 'item3'];
-      const copyItems: string[] = [];
-      items.forEach((item: string) => {
-        copyItems.push(item);
-      });
-      console.log(copyItems)//['item1', 'item2', 'item3']
-```
-
-### forEach(callbackfn, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const array1: string[] = ['a', 'b', 'c'];
-      array1.forEach(element => {console.log(element)});
-      // expected output: "a"
-      // expected output: "b"
-      // expected output: "c"
-      const items: string[] = ['item1', 'item2', 'item3'];
-      const copyItems: string[] = [];
-      items.forEach((item: string) => {
-        copyItems.push(item);
-      });
-      console.log(copyItems)//['item1', 'item2', 'item3']
-```
-
 ### map(callbackfn, thisArg?)
 
 map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
@@ -1430,44 +1284,6 @@ map() 方法创建一个新数组，这个新数组由原数组中的每个元
 | :- | :- | :- |
 | √ | √ | √ |
 
-### map(callbackfn, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[] = [1, 4, 9, 16];
-      const map1 = array1.map((x: number): number => x * 2);
-      console.log(map1);
-      // expected output: Array [2, 8, 18, 32]
-      const numbers: number[] = [1, 4, 9];
-      const roots = numbers.map((num: number): number => num + 1);
-
-      const array2: number[] = [1, 2, 3];
-      array2.map((element: number, index: number, array: number[]) => {
-        console.log(array[index]) //1=>2=>3
-      })
-```
-
-### map(callbackfn, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[] = [1, 4, 9, 16];
-      const map1 = array1.map((x: number): number => x * 2);
-      console.log(map1);
-      // expected output: Array [2, 8, 18, 32]
-      const numbers: number[] = [1, 4, 9];
-      const roots = numbers.map((num: number): number => num + 1);
-
-      const array2: number[] = [1, 2, 3];
-      array2.map((element: number, index: number, array: number[]) => {
-        console.log(array[index]) //1=>2=>3
-      })
-```
-
 ### filter(predicate, thisArg?)
 
 filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
@@ -1576,64 +1392,6 @@ filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提
 | :- | :- | :- |
 | √ | √ | √ |
 
-### filter(predicate, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const words: string[] = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
-      const result = words.filter((word: string): boolean => word.length > 6);
-      console.log(result);// ["exuberant", "destruction", "present"]
-
-      const array1: number[] = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
-      const isPrime = array1.filter((num: number): boolean => {
-        for (let i = 2; num > i; i++) {
-          // swift里，基础类型暂不支持!==,===对比
-          if (num % i == 0) {
-            return false;
-          }
-        }
-        return num > 1;
-      })
-      console.log(isPrime)//[2, 3, 5, 7, 11, 13]
-
-      const array2: number[] = [1, 2, 3];
-      array2.filter((element: number, index: number, array: number[]): boolean => {
-        console.log(array[index])//1=>2=>3
-        return true;
-      })
-```
-
-### filter(predicate, thisArg?)
-
-::: preview 
-
->UTS
-```uts
-      const words: string[] = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
-      const result = words.filter((word: string): boolean => word.length > 6);
-      console.log(result);// ["exuberant", "destruction", "present"]
-
-      const array1: number[] = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
-      const isPrime = array1.filter((num: number): boolean => {
-        for (let i = 2; num > i; i++) {
-          // swift里，基础类型暂不支持!==,===对比
-          if (num % i == 0) {
-            return false;
-          }
-        }
-        return num > 1;
-      })
-      console.log(isPrime)//[2, 3, 5, 7, 11, 13]
-
-      const array2: number[] = [1, 2, 3];
-      array2.filter((element: number, index: number, array: number[]): boolean => {
-        console.log(array[index])//1=>2=>3
-        return true;
-      })
-```
-
 ### reduce(callbackfn)
 
 reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
@@ -1753,51 +1511,6 @@ reduce() 方法对数组中的每个元素按序执行一个提供的 reducer
 | :- | :- | :- |
 | √ | x | √ |
 
-### reduce(callbackfn, initialValue)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[] = [1, 2, 3, 4];
-      const initialValue: number = 0;
-      const sumWithInitial = array1.reduce(
-        (previousValue: number, currentValue: number): number => previousValue + currentValue,
-        initialValue
-      );
-      console.log(sumWithInitial)//10
-```
-
-### reduce(callbackfn, initialValue)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[] = [1, 2, 3, 4];
-      const initialValue: number = 0;
-      const sumWithInitial = array1.reduce(
-        (previousValue: number, currentValue: number): number => previousValue + currentValue,
-        initialValue
-      );
-      console.log(sumWithInitial)//10
-```
-
-### reduce(callbackfn, initialValue)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[] = [1, 2, 3, 4];
-      const initialValue: number = 0;
-      const sumWithInitial = array1.reduce(
-        (previousValue: number, currentValue: number): number => previousValue + currentValue,
-        initialValue
-      );
-      console.log(sumWithInitial)//10
-```
-
 ### reduceRight(callbackfn)
 
 reduceRight() 方法对累加器（accumulator）和数组的每个值（按从右到左的顺序）应用一个函数，并使其成为单个值。
@@ -1935,90 +1648,6 @@ reduceRight() 方法对累加器（accumulator）和数组的每个值（按从
 | :- | :- | :- |
 | √ | x | √ |
 
-### reduceRight(callbackfn, initialValue)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[][] = [[0, 1], [2, 3], [4, 5]];
-      const result1 = array1.reduceRight((accumulator: number[], currentValue: number[]): number[] => accumulator.concat(currentValue));
-      console.log(result1) //[4, 5, 2, 3, 0, 1]
-
-      const array2: number[] = [1, 2, 3, 4];
-      let result2 = array2.reduceRight((acc: number, cur: number, index: number, array: number[]): number => {
-        return acc + cur;
-      });
-
-      console.log(result2) //10
-
-      const result3 = array2.reduceRight((acc: number, cur: number): number => acc + cur, 5);
-      console.log(result3) //15
-```
-
-### reduceRight(callbackfn, initialValue)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[][] = [[0, 1], [2, 3], [4, 5]];
-      const result1 = array1.reduceRight((accumulator: number[], currentValue: number[]): number[] => accumulator.concat(currentValue));
-      console.log(result1) //[4, 5, 2, 3, 0, 1]
-
-      const array2: number[] = [1, 2, 3, 4];
-      let result2 = array2.reduceRight((acc: number, cur: number, index: number, array: number[]): number => {
-        return acc + cur;
-      });
-
-      console.log(result2) //10
-
-      const result3 = array2.reduceRight((acc: number, cur: number): number => acc + cur, 5);
-      console.log(result3) //15
-```
-
-### reduceRight(callbackfn, initialValue)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[][] = [[0, 1], [2, 3], [4, 5]];
-      const result1 = array1.reduceRight((accumulator: number[], currentValue: number[]): number[] => accumulator.concat(currentValue));
-      console.log(result1) //[4, 5, 2, 3, 0, 1]
-
-      const array2: number[] = [1, 2, 3, 4];
-      let result2 = array2.reduceRight((acc: number, cur: number, index: number, array: number[]): number => {
-        return acc + cur;
-      });
-
-      console.log(result2) //10
-
-      const result3 = array2.reduceRight((acc: number, cur: number): number => acc + cur, 5);
-      console.log(result3) //15
-```
-
-### reduceRight(callbackfn, initialValue)
-
-::: preview 
-
->UTS
-```uts
-      const array1: number[][] = [[0, 1], [2, 3], [4, 5]];
-      const result1 = array1.reduceRight((accumulator: number[], currentValue: number[]): number[] => accumulator.concat(currentValue));
-      console.log(result1) //[4, 5, 2, 3, 0, 1]
-
-      const array2: number[] = [1, 2, 3, 4];
-      let result2 = array2.reduceRight((acc: number, cur: number, index: number, array: number[]): number => {
-        return acc + cur;
-      });
-
-      console.log(result2) //10
-
-      const result3 = array2.reduceRight((acc: number, cur: number): number => acc + cur, 5);
-      console.log(result3) //15
-```
-
 ### includes(searchElement, fromIndex?)
 
 includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

package/data/uniappx/uts/uts2js.md

@@ -19,7 +19,7 @@ uts在编译运行目标为js时，会通过uts2js来编译。
 如果开发者写了js，可能会在编译器或IDE静态校验时提示类型错误，但不影响实际运行时表现。
 
 1. 为了拉齐uts编译原生强类型的跨端表现，uts编译后的js，与标准js有略微差异：
-	+ 支持UTSJSONObject。尤其是UTSJSONObject有几个方法，在标准js object中不存在，包括getString、getNumber、getArray。
+	+ 支持UTSJSONObject。尤其是UTSJSONObject有几个方法，在标准js object中不存在，包括`parse`,`get`,`set`,`getAny`,`getBoolean`,`getNumber`,`getString`,`getArray`,`getJSON`,`toMap`。
 	+ type没有擦除而是编译成了class。这也是为了保持和uts2kt、uts2swift一致。
 	+ 把部分js内置API返回值从undefined改为null。因为kt、swift等强类型语言没有undefined概念，为拉齐而反向修改了js端逻辑。以下js内置API在uts2js编译后，会将返回值从undefined改为null：
 		* Array.prototype.pop

package/data/uniappx/vue/README.md

@@ -283,7 +283,10 @@ HBuilderX 4.71 起，App 端可以使用深度选择器控制台不再告警，
 9. 在组合式 API 下，子组件方法不会自动暴露给父组件，只有通过 `defineExpose` 显式暴露的方法，父组件才能通过 ref 调用，避免父组件无法访问子组件方法。
 10. 在测试例页面用到页面中的数据或方法时，必须通过 `defineExpose` 显式暴露数据和方法，避免测试无法访问。
 11. 在页面生命周期中，`onPullDownRefresh` 应作为页面生命周期函数处理，而不是写成普通方法。
-12. 检查控制台的编译报错，如果有报错自行修复，并再次检查编译报错，直到无报错编译通过。
+12. 组合式写法不支持 `mixins` 选项：
+- 选项中若使用了 `mixins: [...]`，必须去掉，把 mixin 提供的 data、computed、watch、methods 和生命周期合并进当前组件的组合式代码，或抽成普通 composable 函数；
+- 若使用了 `uniCloud.mixinDatacom`，改用其对应的组合式 API：用 `const props = defineProps({ ...uniCloud.datacomProps })` 展开内置 props，再 `const datacom = uniCloud.useDatacom(props)` 创建实例并调用 `datacom.easyGet({})`，模板改用 `datacom.resData`/`datacom.loading`/`datacom.errorMessage`（不用 `.value`），不要手动拷贝其内部实现；注意：`uniCloud.useDatacom` 从 HBuilderX 5.32 版本起才支持，且仅在项目已关联 uniCloud 服务空间时可用，使用前需先关联服务空间。
+13. 检查控制台的编译报错，如果有报错自行修复，并再次检查编译报错，直到无报错编译通过。
 
 ## 利用 AI 适配蒸汽模式@ai-vapor
 
@@ -300,7 +303,9 @@ HBuilderX 4.71 起，App 端可以使用深度选择器控制台不再告警，
 7. 选项式 API 中的 `beforeUnmount`、`mounted`、`unmounted`，改为组合式 API 时分别使用 `onBeforeUnmount`、`onMounted`、`onUnmounted`；`created` 的逻辑放到 `<script setup>` 顶层执行。
 8. 页面生命周期 `onPullDownRefresh` 不要当作普通方法处理；如果蒸汽模式当前平台不支持页面下拉刷新，改为使用页面内 `scroll-view` 等可兼容方案，并保持交互等价。
 9. 子组件方法、页面测试入口或外部需要访问的数据和方法，必须通过 `defineExpose` 显式暴露，避免父组件、测试用例或外部调用失效。
-10. 不要继续使用 `mixin`，将其中的数据、计算逻辑、方法和生命周期合并到当前组件的组合式代码中，或抽成普通 composable 函数。
+10. 不要继续使用 `mixin`：
+- 普通 `mixins: [...]` 必须去掉，把 mixin 提供的 data、computed、watch、methods 和生命周期合并进当前组件的组合式代码，或抽成普通 composable 函数；
+- 若使用了 `uniCloud.mixinDatacom`，改用其对应的组合式 API：用 `const props = defineProps({ ...uniCloud.datacomProps })` 展开内置 props，再 `const datacom = uniCloud.useDatacom(props)` 创建实例并调用 `datacom.easyGet({})`，模板改用 `datacom.resData`/`datacom.loading`/`datacom.errorMessage`（不用 `.value`），不要手动拷贝其内部实现；注意：`uniCloud.useDatacom` 从 HBuilderX 5.32 版本起才支持，且仅在项目已关联 uniCloud 服务空间时可用，使用前需先关联服务空间。
 11. 检查模板中蒸汽模式不支持或行为变化的写法，按项目现有规范改成兼容写法，保持页面结构和交互不变。
 12. 检查 `scroll-view`、`swiper` 等组件的布尔属性；不要依赖旧默认值，按页面实际需要显式补齐 `true` 或 `false`，避免行为变化。
 13. 检查 `list-view` / `list-item`：用于复用的 `list-item` 循环必须有稳定 `:key`；`list-view` 和需要复用的 `list-item` 应在同一个 uvue 文件内；`list-item` 内文本必须使用 `text` 包裹；不要依赖横向滚动、`margin` 等不兼容能力。

package/data/uniappx/vue/built-in.md

@@ -2063,8 +2063,8 @@
 
 <template>
   <view>
-    <input ref="input" />
-    <text v-for="item in 3" ref="textItems" :key="item">{{
+    <input id="input" ref="input" />
+    <text v-for="item in 3" :id="'text-item-' + item" ref="textItems" :key="item">{{
       item
     }}</text>
     <Foo ref="foo" />
@@ -2073,13 +2073,25 @@
 ```
 `this.$refs` 也是非响应式的，因此你不应该尝试在模板中使用它来进行数据绑定。
 
+对应的 `Foo` 组件（选项式 API）：
+
+```vue
+
+<template>
+  <view>
+    <text>title: {{title}}</text>
+  </view>
+</template>
+
+```
+
 使用组合式 API，引用将存储在与名字匹配的 ref 里：
 ```vue
 
 <template>
   <view>
-    <input ref="input" />
-    <text v-for="item in 3" ref="textItems" :key="item">{{
+    <input id="input" ref="input" />
+    <text v-for="item in 3" :id="'text-item-' + item" ref="textItems" :key="item">{{
       item
     }}</text>
     <Foo ref="foo" />
@@ -2087,6 +2099,8 @@
 </template>
 ```
 
+对应的 `Foo` 组件（组合式 API），通过 `defineExpose` 暴露供父组件调用的方法：
+
 ```vue
 
 <template>
@@ -2098,9 +2112,9 @@
 ```
 
 #### 获取内置组件与自定义组件的区别
-- 使用 `ref` 获取内置组件实例时会获取到对应的 `Element`，例如上述代码示例中，`input` 组件获取到的是 `UniInputElement`, `text` 组件获取到的是 `UniTextElement`，可以调用 `Element` 的方法和属性。
+- App、Web 使用 `ref` 获取内置组件实例时会获取到对应的 `Element`，例如上述代码示例中，`input` 组件获取到的是 `UniInputElement`, `text` 组件获取到的是 `UniTextElement`，可以调用 `Element` 的方法和属性。
 - 使用 `ref` 获取自定义组件实例时会获取到对应的 vue 组件实例，例如上述代码示例中，`Foo` 组件获取到的是 `ComponentPublicInstance`，可以获取自定义组件的属性或调用方法，[详情](./component.md#page-call-component-method)。
-- 小程序平台如果期望使用`ref`获取到`UniElement`需要在此`UniElement`上设置id，此外小程序平台的`UniElement`使用是受限的，详情参考：[UniElement](../mp/README.md#unielement)
+- 小程序平台使用 `ref` 获取内置组件引用时，需要为节点设置 `id`，`v-for` 中各节点的 `id` 应保持唯一。小程序仅支持 `UniElement`，不支持 `UniInputElement`、`UniTextElement` 等类型，且可用的属性和方法受限，详情参考：[UniElement](../mp/README.md#unielement)。
 
 ### is
 

package/data/uniappx/vue/component.md

@@ -912,6 +912,8 @@ ComponentPublicInstance
 ```
 这个 `$attrs` 对象包含了除组件所声明的 `props` 和 `emits` 之外的所有其他 attribute，例如 `class`，`style`，`v-on` 监听器等等。
 
+uni-app x 编译到小程序时，`v-bind="$attrs"` 的显式透传范围存在限制，详见[文档](../mp/README.md#v-bind-attrs)。
+
 有几点需要注意：
 
 - 和 `props` 有所不同，透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像 `foo-bar` 这样的一个 attribute 需要通过 `$attrs['foo-bar']` 来访问。

package/data/uniappx/vue/modifier.md

@@ -235,15 +235,15 @@
 如果你想让用户输入自动转换为数字，你可以在 `v-model` 后添加 `.number` 修饰符来管理输入
 
 **兼容性 ** 
- | Web | 微信小程序 | Android | iOS | HarmonyOS |
-| :- | :- | :- | :- | :- |
-| 4.0 | √ | 3.9 | x | x |
+ | Web | 微信小程序 | Android | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- |
+| 4.0 | √ | 3.9 | x | 5.11 | x | 5.0 |
 
 ### trim
 
 如果你想要默认自动去除用户输入内容中两端的空格，你可以在 `v-model` 后添加 `.trim` 修饰符
 
 **兼容性 ** 
- | Web | 微信小程序 | Android | iOS | HarmonyOS |
-| :- | :- | :- | :- | :- |
-| 4.0 | √ | 3.9 | x | x |
+ | Web | 微信小程序 | Android | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- |
+| 4.0 | √ | 3.9 | x | 5.11 | x | 5.0 |

package/data/uniappx/web/ssr.md

@@ -42,7 +42,9 @@ export default defineConfig({
 
 **示例**
 
-```ts
+下面示例假设 `@/store/index.uts` 已导出 `useItemsStore`，包含按 ID 保存数据的 `items` 状态和异步 `fetchItem(id)` 方法。SSR 配置见下方 [Pinia](#pinia) 章节。
+
+```vue
 <template>
   <text v-if="item">{{ item.title }}</text>
   <text v-else>...</text>
@@ -58,80 +60,37 @@ export default defineConfig({
 const categories = ssrRef(['c1', 'c2'], 'categories');
 ```
 
-#### vuex
+#### Pinia
 
-对于复杂的数据，如需保持云端客户端一致，建议使用vuex进行存储。下面是一个简单的示例：
+Pinia 的引入和 store 定义见[全局变量与状态管理](../tutorial/store.md#pinia)。SSR 时需为每次请求创建独立的 Pinia 实例，并返回以下 `store` 适配对象，以同步服务端和客户端状态：
 
 **main.uts**
 
 ```ts
 import { createSSRApp } from 'vue'
+import { createPinia } from 'pinia'
+import type { StateTree } from 'pinia'
 import App from './App.uvue'
-import createStore from './store'
+
 export function createApp() {
   const app = createSSRApp(App)
-
-  const store = createStore() // 创建 store
-  app.use(store)
+  const pinia = createPinia()
+  app.use(pinia)
 
   return {
     app,
-    store,// 必须返回 store
-  }
-}
-```
-
-**store/index.uts**
-
-```ts
-import { createStore } from 'vuex'
-
-// 模拟接口获取数据
-function fetchItem(id) {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({
-        id,
-        title: 'title' + id,
-      })
-    }, 300)
-  })
-}
-
-export default () => {
-  return createStore({
-    state() {
-      return {
-        items: {},
-      }
-    },
-    actions: {
-      fetchItem({ commit }, id) {
-        return fetchItem(id).then((item) => {
-          commit('setItem', { id, item })
-        })
+    store: {
+      get state() {
+        return pinia.state.value
       },
-    },
-    mutations: {
-      setItem(state, { id, item }) {
-        state.items[id] = item
+      replaceState(state: Record<string, StateTree>) {
+        pinia.state.value = state
       },
     },
-  })
+  }
 }
 ```
 
-**pages/index/index.uvue**
-
-```vue
-<template>
-  <text v-if="item">{{ item.title }}</text>
-  <text v-else>...</text>
-  <text>{{ JSON.stringify(categories) }}</text>
-</template>
-
-```
-
 #### page-meta
 
 uni-app-x内page-meta仅保留了存放head的功能，page-meta内的head节点在最终渲染时会传送到html的head内，可用于存放keyword、description等信息
@@ -226,7 +185,7 @@ uni-app-x内page-meta仅保留了存放head的功能，page-meta内的head节点
 
 ### 注意事项
 
-- 浏览器控制台提示如下警告，说明服务器和客户端渲染的结果不一致，检查模板绑定的属性是否使用了 `ssrRef`
+- 浏览器控制台提示如下警告，说明服务器和客户端渲染的结果不一致，检查模板绑定的状态是否通过 `ssrRef` 或上述 Pinia SSR 方式同步
 
 ```
 [Vue warn]: Hydration node mismatch: